@charset "UTF-8";
/* ==========================================================================
  Browser support
  ========================================================================== */
/* Typography
   ========================================================================== */
/* Grid
   ========================================================================== */
/* Code examples
   ========================================================================== */
/* Transition mixins */
/* Button Mixins */
@font-face {
  font-family: 'SourceSansPro';
  src: font-url("fonts/sourcesanspro-light-webfont.eot");
  src: font-url("fonts/sourcesanspro-light-webfont.eot?#iefix") format("embedded-opentype"), font-url("fonts/sourcesanspro-light-webfont.woff") format("woff"), font-url("fonts/sourcesanspro-light-webfont.ttf") format("truetype"), font-url("fonts/sourcesanspro-light-webfont.svg#sourcesanspro-light-webfont") format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'SourceSansPro';
  src: font-url("fonts/sourcesanspro-regular-webfont.eot");
  src: font-url("fonts/sourcesanspro-regular-webfont.eot?#iefix") format("embedded-opentype"), font-url("fonts/sourcesanspro-regular-webfont.woff") format("woff"), font-url("fonts/sourcesanspro-regular-webfont.ttf") format("truetype"), font-url("fonts/sourcesanspro-regular-webfont.svg#sourcesanspro-regular-webfont") format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'SourceSansPro';
  src: font-url("fonts/sourcesanspro-it-webfont.eot");
  src: font-url("fonts/sourcesanspro-it-webfont.eot?#iefix") format("embedded-opentype"), font-url("fonts/sourcesanspro-it-webfont.woff") format("woff"), font-url("fonts/sourcesanspro-it-webfont.ttf") format("truetype"), font-url("fonts/sourcesanspro-it-webfont.svg#sourcesanspro-it-webfont") format("svg");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'SourceSansPro';
  src: font-url("fonts/sourcesanspro-bold-webfont.eot");
  src: font-url("fonts/sourcesanspro-bold-webfont.eot?#iefix") format("embedded-opentype"), font-url("fonts/sourcesanspro-bold-webfont.woff") format("woff"), font-url("fonts/sourcesanspro-bold-webfont.ttf") format("truetype"), font-url("fonts/sourcesanspro-bold-webfont.svg#sourcesanspro-bold-webfont") format("svg");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'SourceSansPro';
  src: font-url("fonts/sourcesanspro-black-webfont.eot");
  src: font-url("fonts/sourcesanspro-black-webfont.eot?#iefix") format("embedded-opentype"), font-url("fonts/sourcesanspro-black-webfont.woff") format("woff"), font-url("fonts/sourcesanspro-black-webfont.ttf") format("truetype"), font-url("fonts/sourcesanspro-black-webfont.svg#sourcesanspro-black-webfont") format("svg");
  font-weight: 900;
  font-style: normal;
}
/*!
 *  Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: font-url("fonts/fontawesome-webfont.eot?v=4.2.0");
  src: font-url("fonts/fontawesome-webfont.eot?#iefix&v=4.2.0") format("embedded-opentype"), font-url("fonts/fontawesome-webfont.woff?v=4.2.0") format("woff"), font-url("fonts/fontawesome-webfont.ttf?v=4.2.0") format("truetype"), font-url("fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* line 4, ../node_modules/font-awesome/scss/_core.scss */
.fa, .back-to-top {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* makes the font 33% larger relative to the icon container */
/* line 5, ../node_modules/font-awesome/scss/_larger.scss */
.fa-lg {
  font-size: 1.33333em;
  line-height: 0.75em;
  vertical-align: -15%;
}

/* line 10, ../node_modules/font-awesome/scss/_larger.scss */
.fa-2x {
  font-size: 2em;
}

/* line 11, ../node_modules/font-awesome/scss/_larger.scss */
.fa-3x {
  font-size: 3em;
}

/* line 12, ../node_modules/font-awesome/scss/_larger.scss */
.fa-4x {
  font-size: 4em;
}

/* line 13, ../node_modules/font-awesome/scss/_larger.scss */
.fa-5x {
  font-size: 5em;
}

/* line 3, ../node_modules/font-awesome/scss/_fixed-width.scss */
.fa-fw {
  width: 1.28571em;
  text-align: center;
}

/* line 4, ../node_modules/font-awesome/scss/_list.scss */
.fa-ul {
  padding-left: 0;
  margin-left: 2.14286em;
  list-style-type: none;
}
/* line 8, ../node_modules/font-awesome/scss/_list.scss */
.fa-ul > li {
  position: relative;
}

/* line 10, ../node_modules/font-awesome/scss/_list.scss */
.fa-li {
  position: absolute;
  left: -2.14286em;
  width: 2.14286em;
  top: 0.14286em;
  text-align: center;
}
/* line 16, ../node_modules/font-awesome/scss/_list.scss */
.fa-li.fa-lg {
  left: -1.85714em;
}

/* line 4, ../node_modules/font-awesome/scss/_bordered-pulled.scss */
.fa-border {
  padding: .2em .25em .15em;
  border: solid 0.08em #eee;
  border-radius: .1em;
}

/* line 10, ../node_modules/font-awesome/scss/_bordered-pulled.scss */
.pull-right {
  float: right;
}

/* line 11, ../node_modules/font-awesome/scss/_bordered-pulled.scss */
.pull-left {
  float: left;
}

/* line 14, ../node_modules/font-awesome/scss/_bordered-pulled.scss */
.fa.pull-left, .pull-left.back-to-top {
  margin-right: .3em;
}
/* line 15, ../node_modules/font-awesome/scss/_bordered-pulled.scss */
.fa.pull-right, .pull-right.back-to-top {
  margin-left: .3em;
}

/* line 4, ../node_modules/font-awesome/scss/_spinning.scss */
.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
/* line 4, ../node_modules/font-awesome/scss/_rotated-flipped.scss */
.fa-rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

/* line 5, ../node_modules/font-awesome/scss/_rotated-flipped.scss */
.fa-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* line 6, ../node_modules/font-awesome/scss/_rotated-flipped.scss */
.fa-rotate-270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

/* line 8, ../node_modules/font-awesome/scss/_rotated-flipped.scss */
.fa-flip-horizontal {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

/* line 9, ../node_modules/font-awesome/scss/_rotated-flipped.scss */
.fa-flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

/* line 14, ../node_modules/font-awesome/scss/_rotated-flipped.scss */
:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}

/* line 4, ../node_modules/font-awesome/scss/_stacked.scss */
.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}

/* line 12, ../node_modules/font-awesome/scss/_stacked.scss */
.fa-stack-1x, .fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

/* line 18, ../node_modules/font-awesome/scss/_stacked.scss */
.fa-stack-1x {
  line-height: inherit;
}

/* line 19, ../node_modules/font-awesome/scss/_stacked.scss */
.fa-stack-2x {
  font-size: 2em;
}

/* line 20, ../node_modules/font-awesome/scss/_stacked.scss */
.fa-inverse {
  color: #fff;
}

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
/* line 4, ../node_modules/font-awesome/scss/_icons.scss */
.fa-glass:before {
  content: "";
}

/* line 5, ../node_modules/font-awesome/scss/_icons.scss */
.fa-music:before {
  content: "";
}

/* line 6, ../node_modules/font-awesome/scss/_icons.scss */
.fa-search:before {
  content: "";
}

/* line 7, ../node_modules/font-awesome/scss/_icons.scss */
.fa-envelope-o:before {
  content: "";
}

/* line 8, ../node_modules/font-awesome/scss/_icons.scss */
.fa-heart:before {
  content: "";
}

/* line 9, ../node_modules/font-awesome/scss/_icons.scss */
.fa-star:before {
  content: "";
}

/* line 10, ../node_modules/font-awesome/scss/_icons.scss */
.fa-star-o:before {
  content: "";
}

/* line 11, ../node_modules/font-awesome/scss/_icons.scss */
.fa-user:before {
  content: "";
}

/* line 12, ../node_modules/font-awesome/scss/_icons.scss */
.fa-film:before {
  content: "";
}

/* line 13, ../node_modules/font-awesome/scss/_icons.scss */
.fa-th-large:before {
  content: "";
}

/* line 14, ../node_modules/font-awesome/scss/_icons.scss */
.fa-th:before {
  content: "";
}

/* line 15, ../node_modules/font-awesome/scss/_icons.scss */
.fa-th-list:before {
  content: "";
}

/* line 16, ../node_modules/font-awesome/scss/_icons.scss */
.fa-check:before {
  content: "";
}

/* line 17, ../node_modules/font-awesome/scss/_icons.scss */
.fa-remove:before,
.fa-close:before,
.fa-times:before {
  content: "";
}

/* line 20, ../node_modules/font-awesome/scss/_icons.scss */
.fa-search-plus:before {
  content: "";
}

/* line 21, ../node_modules/font-awesome/scss/_icons.scss */
.fa-search-minus:before {
  content: "";
}

/* line 22, ../node_modules/font-awesome/scss/_icons.scss */
.fa-power-off:before {
  content: "";
}

/* line 23, ../node_modules/font-awesome/scss/_icons.scss */
.fa-signal:before {
  content: "";
}

/* line 24, ../node_modules/font-awesome/scss/_icons.scss */
.fa-gear:before,
.fa-cog:before {
  content: "";
}

/* line 26, ../node_modules/font-awesome/scss/_icons.scss */
.fa-trash-o:before {
  content: "";
}

/* line 27, ../node_modules/font-awesome/scss/_icons.scss */
.fa-home:before {
  content: "";
}

/* line 28, ../node_modules/font-awesome/scss/_icons.scss */
.fa-file-o:before {
  content: "";
}

/* line 29, ../node_modules/font-awesome/scss/_icons.scss */
.fa-clock-o:before {
  content: "";
}

/* line 30, ../node_modules/font-awesome/scss/_icons.scss */
.fa-road:before {
  content: "";
}

/* line 31, ../node_modules/font-awesome/scss/_icons.scss */
.fa-download:before {
  content: "";
}

/* line 32, ../node_modules/font-awesome/scss/_icons.scss */
.fa-arrow-circle-o-down:before {
  content: "";
}

/* line 33, ../node_modules/font-awesome/scss/_icons.scss */
.fa-arrow-circle-o-up:before {
  content: "";
}

/* line 34, ../node_modules/font-awesome/scss/_icons.scss */
.fa-inbox:before {
  content: "";
}

/* line 35, ../node_modules/font-awesome/scss/_icons.scss */
.fa-play-circle-o:before {
  content: "";
}

/* line 36, ../node_modules/font-awesome/scss/_icons.scss */
.fa-rotate-right:before,
.fa-repeat:before {
  content: "";
}

/* line 38, ../node_modules/font-awesome/scss/_icons.scss */
.fa-refresh:before {
  content: "";
}

/* line 39, ../node_modules/font-awesome/scss/_icons.scss */
.fa-list-alt:before {
  content: "";
}

/* line 40, ../node_modules/font-awesome/scss/_icons.scss */
.fa-lock:before {
  content: "";
}

/* line 41, ../node_modules/font-awesome/scss/_icons.scss */
.fa-flag:before {
  content: "";
}

/* line 42, ../node_modules/font-awesome/scss/_icons.scss */
.fa-headphones:before {
  content: "";
}

/* line 43, ../node_modules/font-awesome/scss/_icons.scss */
.fa-volume-off:before {
  content: "";
}

/* line 44, ../node_modules/font-awesome/scss/_icons.scss */
.fa-volume-down:before {
  content: "";
}

/* line 45, ../node_modules/font-awesome/scss/_icons.scss */
.fa-volume-up:before {
  content: "";
}

/* line 46, ../node_modules/font-awesome/scss/_icons.scss */
.fa-qrcode:before {
  content: "";
}

/* line 47, ../node_modules/font-awesome/scss/_icons.scss */
.fa-barcode:before {
  content: "";
}

/* line 48, ../node_modules/font-awesome/scss/_icons.scss */
.fa-tag:before {
  content: "";
}

/* line 49, ../node_modules/font-awesome/scss/_icons.scss */
.fa-tags:before {
  content: "";
}

/* line 50, ../node_modules/font-awesome/scss/_icons.scss */
.fa-book:before {
  content: "";
}

/* line 51, ../node_modules/font-awesome/scss/_icons.scss */
.fa-bookmark:before {
  content: "";
}

/* line 52, ../node_modules/font-awesome/scss/_icons.scss */
.fa-print:before {
  content: "";
}

/* line 53, ../node_modules/font-awesome/scss/_icons.scss */
.fa-camera:before {
  content: "";
}

/* line 54, ../node_modules/font-awesome/scss/_icons.scss */
.fa-font:before {
  content: "";
}

/* line 55, ../node_modules/font-awesome/scss/_icons.scss */
.fa-bold:before {
  content: "";
}

/* line 56, ../node_modules/font-awesome/scss/_icons.scss */
.fa-italic:before {
  content: "";
}

/* line 57, ../node_modules/font-awesome/scss/_icons.scss */
.fa-text-height:before {
  content: "";
}

/* line 58, ../node_modules/font-awesome/scss/_icons.scss */
.fa-text-width:before {
  content: "";
}

/* line 59, ../node_modules/font-awesome/scss/_icons.scss */
.fa-align-left:before {
  content: "";
}

/* line 60, ../node_modules/font-awesome/scss/_icons.scss */
.fa-align-center:before {
  content: "";
}

/* line 61, ../node_modules/font-awesome/scss/_icons.scss */
.fa-align-right:before {
  content: "";
}

/* line 62, ../node_modules/font-awesome/scss/_icons.scss */
.fa-align-justify:before {
  content: "";
}

/* line 63, ../node_modules/font-awesome/scss/_icons.scss */
.fa-list:before {
  content: "";
}

/* line 64, ../node_modules/font-awesome/scss/_icons.scss */
.fa-dedent:before,
.fa-outdent:before {
  content: "";
}

/* line 66, ../node_modules/font-awesome/scss/_icons.scss */
.fa-indent:before {
  content: "";
}

/* line 67, ../node_modules/font-awesome/scss/_icons.scss */
.fa-video-camera:before {
  content: "";
}

/* line 68, ../node_modules/font-awesome/scss/_icons.scss */
.fa-photo:before,
.fa-image:before,
.fa-picture-o:before {
  content: "";
}

/* line 71, ../node_modules/font-awesome/scss/_icons.scss */
.fa-pencil:before {
  content: "";
}

/* line 72, ../node_modules/font-awesome/scss/_icons.scss */
.fa-map-marker:before {
  content: "";
}

/* line 73, ../node_modules/font-awesome/scss/_icons.scss */
.fa-adjust:before {
  content: "";
}

/* line 74, ../node_modules/font-awesome/scss/_icons.scss */
.fa-tint:before {
  content: "";
}

/* line 75, ../node_modules/font-awesome/scss/_icons.scss */
.fa-edit:before,
.fa-pencil-square-o:before {
  content: "";
}

/* line 77, ../node_modules/font-awesome/scss/_icons.scss */
.fa-share-square-o:before {
  content: "";
}

/* line 78, ../node_modules/font-awesome/scss/_icons.scss */
.fa-check-square-o:before {
  content: "";
}

/* line 79, ../node_modules/font-awesome/scss/_icons.scss */
.fa-arrows:before {
  content: "";
}

/* line 80, ../node_modules/font-awesome/scss/_icons.scss */
.fa-step-backward:before {
  content: "";
}

/* line 81, ../node_modules/font-awesome/scss/_icons.scss */
.fa-fast-backward:before {
  content: "";
}

/* line 82, ../node_modules/font-awesome/scss/_icons.scss */
.fa-backward:before {
  content: "";
}

/* line 83, ../node_modules/font-awesome/scss/_icons.scss */
.fa-play:before {
  content: "";
}

/* line 84, ../node_modules/font-awesome/scss/_icons.scss */
.fa-pause:before {
  content: "";
}

/* line 85, ../node_modules/font-awesome/scss/_icons.scss */
.fa-stop:before {
  content: "";
}

/* line 86, ../node_modules/font-awesome/scss/_icons.scss */
.fa-forward:before {
  content: "";
}

/* line 87, ../node_modules/font-awesome/scss/_icons.scss */
.fa-fast-forward:before {
  content: "";
}

/* line 88, ../node_modules/font-awesome/scss/_icons.scss */
.fa-step-forward:before {
  content: "";
}

/* line 89, ../node_modules/font-awesome/scss/_icons.scss */
.fa-eject:before {
  content: "";
}

/* line 90, ../node_modules/font-awesome/scss/_icons.scss */
.fa-chevron-left:before {
  content: "";
}

/* line 91, ../node_modules/font-awesome/scss/_icons.scss */
.fa-chevron-right:before {
  content: "";
}

/* line 92, ../node_modules/font-awesome/scss/_icons.scss */
.fa-plus-circle:before {
  content: "";
}

/* line 93, ../node_modules/font-awesome/scss/_icons.scss */
.fa-minus-circle:before {
  content: "";
}

/* line 94, ../node_modules/font-awesome/scss/_icons.scss */
.fa-times-circle:before {
  content: "";
}

/* line 95, ../node_modules/font-awesome/scss/_icons.scss */
.fa-check-circle:before {
  content: "";
}

/* line 96, ../node_modules/font-awesome/scss/_icons.scss */
.fa-question-circle:before {
  content: "";
}

/* line 97, ../node_modules/font-awesome/scss/_icons.scss */
.fa-info-circle:before {
  content: "";
}

/* line 98, ../node_modules/font-awesome/scss/_icons.scss */
.fa-crosshairs:before {
  content: "";
}

/* line 99, ../node_modules/font-awesome/scss/_icons.scss */
.fa-times-circle-o:before {
  content: "";
}

/* line 100, ../node_modules/font-awesome/scss/_icons.scss */
.fa-check-circle-o:before {
  content: "";
}

/* line 101, ../node_modules/font-awesome/scss/_icons.scss */
.fa-ban:before {
  content: "";
}

/* line 102, ../node_modules/font-awesome/scss/_icons.scss */
.fa-arrow-left:before {
  content: "";
}

/* line 103, ../node_modules/font-awesome/scss/_icons.scss */
.fa-arrow-right:before {
  content: "";
}

/* line 104, ../node_modules/font-awesome/scss/_icons.scss */
.fa-arrow-up:before, .back-to-top:before {
  content: "";
}

/* line 105, ../node_modules/font-awesome/scss/_icons.scss */
.fa-arrow-down:before {
  content: "";
}

/* line 106, ../node_modules/font-awesome/scss/_icons.scss */
.fa-mail-forward:before,
.fa-share:before {
  content: "";
}

/* line 108, ../node_modules/font-awesome/scss/_icons.scss */
.fa-expand:before {
  content: "";
}

/* line 109, ../node_modules/font-awesome/scss/_icons.scss */
.fa-compress:before {
  content: "";
}

/* line 110, ../node_modules/font-awesome/scss/_icons.scss */
.fa-plus:before {
  content: "";
}

/* line 111, ../node_modules/font-awesome/scss/_icons.scss */
.fa-minus:before {
  content: "";
}

/* line 112, ../node_modules/font-awesome/scss/_icons.scss */
.fa-asterisk:before {
  content: "";
}

/* line 113, ../node_modules/font-awesome/scss/_icons.scss */
.fa-exclamation-circle:before {
  content: "";
}

/* line 114, ../node_modules/font-awesome/scss/_icons.scss */
.fa-gift:before {
  content: "";
}

/* line 115, ../node_modules/font-awesome/scss/_icons.scss */
.fa-leaf:before {
  content: "";
}

/* line 116, ../node_modules/font-awesome/scss/_icons.scss */
.fa-fire:before {
  content: "";
}

/* line 117, ../node_modules/font-awesome/scss/_icons.scss */
.fa-eye:before {
  content: "";
}

/* line 118, ../node_modules/font-awesome/scss/_icons.scss */
.fa-eye-slash:before {
  content: "";
}

/* line 119, ../node_modules/font-awesome/scss/_icons.scss */
.fa-warning:before,
.fa-exclamation-triangle:before {
  content: "";
}

/* line 121, ../node_modules/font-awesome/scss/_icons.scss */
.fa-plane:before {
  content: "";
}

/* line 122, ../node_modules/font-awesome/scss/_icons.scss */
.fa-calendar:before {
  content: "";
}

/* line 123, ../node_modules/font-awesome/scss/_icons.scss */
.fa-random:before {
  content: "";
}

/* line 124, ../node_modules/font-awesome/scss/_icons.scss */
.fa-comment:before {
  content: "";
}

/* line 125, ../node_modules/font-awesome/scss/_icons.scss */
.fa-magnet:before {
  content: "";
}

/* line 126, ../node_modules/font-awesome/scss/_icons.scss */
.fa-chevron-up:before {
  content: "";
}

/* line 127, ../node_modules/font-awesome/scss/_icons.scss */
.fa-chevron-down:before {
  content: "";
}

/* line 128, ../node_modules/font-awesome/scss/_icons.scss */
.fa-retweet:before {
  content: "";
}

/* line 129, ../node_modules/font-awesome/scss/_icons.scss */
.fa-shopping-cart:before {
  content: "";
}

/* line 130, ../node_modules/font-awesome/scss/_icons.scss */
.fa-folder:before {
  content: "";
}

/* line 131, ../node_modules/font-awesome/scss/_icons.scss */
.fa-folder-open:before {
  content: "";
}

/* line 132, ../node_modules/font-awesome/scss/_icons.scss */
.fa-arrows-v:before {
  content: "";
}

/* line 133, ../node_modules/font-awesome/scss/_icons.scss */
.fa-arrows-h:before {
  content: "";
}

/* line 134, ../node_modules/font-awesome/scss/_icons.scss */
.fa-bar-chart-o:before,
.fa-bar-chart:before {
  content: "";
}

/* line 136, ../node_modules/font-awesome/scss/_icons.scss */
.fa-twitter-square:before {
  content: "";
}

/* line 137, ../node_modules/font-awesome/scss/_icons.scss */
.fa-facebook-square:before {
  content: "";
}

/* line 138, ../node_modules/font-awesome/scss/_icons.scss */
.fa-camera-retro:before {
  content: "";
}

/* line 139, ../node_modules/font-awesome/scss/_icons.scss */
.fa-key:before {
  content: "";
}

/* line 140, ../node_modules/font-awesome/scss/_icons.scss */
.fa-gears:before,
.fa-cogs:before {
  content: "";
}

/* line 142, ../node_modules/font-awesome/scss/_icons.scss */
.fa-comments:before {
  content: "";
}

/* line 143, ../node_modules/font-awesome/scss/_icons.scss */
.fa-thumbs-o-up:before {
  content: "";
}

/* line 144, ../node_modules/font-awesome/scss/_icons.scss */
.fa-thumbs-o-down:before {
  content: "";
}

/* line 145, ../node_modules/font-awesome/scss/_icons.scss */
.fa-star-half:before {
  content: "";
}

/* line 146, ../node_modules/font-awesome/scss/_icons.scss */
.fa-heart-o:before {
  content: "";
}

/* line 147, ../node_modules/font-awesome/scss/_icons.scss */
.fa-sign-out:before {
  content: "";
}

/* line 148, ../node_modules/font-awesome/scss/_icons.scss */
.fa-linkedin-square:before {
  content: "";
}

/* line 149, ../node_modules/font-awesome/scss/_icons.scss */
.fa-thumb-tack:before {
  content: "";
}

/* line 150, ../node_modules/font-awesome/scss/_icons.scss */
.fa-external-link:before {
  content: "";
}

/* line 151, ../node_modules/font-awesome/scss/_icons.scss */
.fa-sign-in:before {
  content: "";
}

/* line 152, ../node_modules/font-awesome/scss/_icons.scss */
.fa-trophy:before {
  content: "";
}

/* line 153, ../node_modules/font-awesome/scss/_icons.scss */
.fa-github-square:before {
  content: "";
}

/* line 154, ../node_modules/font-awesome/scss/_icons.scss */
.fa-upload:before {
  content: "";
}

/* line 155, ../node_modules/font-awesome/scss/_icons.scss */
.fa-lemon-o:before {
  content: "";
}

/* line 156, ../node_modules/font-awesome/scss/_icons.scss */
.fa-phone:before {
  content: "";
}

/* line 157, ../node_modules/font-awesome/scss/_icons.scss */
.fa-square-o:before {
  content: "";
}

/* line 158, ../node_modules/font-awesome/scss/_icons.scss */
.fa-bookmark-o:before {
  content: "";
}

/* line 159, ../node_modules/font-awesome/scss/_icons.scss */
.fa-phone-square:before {
  content: "";
}

/* line 160, ../node_modules/font-awesome/scss/_icons.scss */
.fa-twitter:before {
  content: "";
}

/* line 161, ../node_modules/font-awesome/scss/_icons.scss */
.fa-facebook:before {
  content: "";
}

/* line 162, ../node_modules/font-awesome/scss/_icons.scss */
.fa-github:before {
  content: "";
}

/* line 163, ../node_modules/font-awesome/scss/_icons.scss */
.fa-unlock:before {
  content: "";
}

/* line 164, ../node_modules/font-awesome/scss/_icons.scss */
.fa-credit-card:before {
  content: "";
}

/* line 165, ../node_modules/font-awesome/scss/_icons.scss */
.fa-rss:before {
  content: "";
}

/* line 166, ../node_modules/font-awesome/scss/_icons.scss */
.fa-hdd-o:before {
  content: "";
}

/* line 167, ../node_modules/font-awesome/scss/_icons.scss */
.fa-bullhorn:before {
  content: "";
}

/* line 168, ../node_modules/font-awesome/scss/_icons.scss */
.fa-bell:before {
  content: "";
}

/* line 169, ../node_modules/font-awesome/scss/_icons.scss */
.fa-certificate:before {
  content: "";
}

/* line 170, ../node_modules/font-awesome/scss/_icons.scss */
.fa-hand-o-right:before {
  content: "";
}

/* line 171, ../node_modules/font-awesome/scss/_icons.scss */
.fa-hand-o-left:before {
  content: "";
}

/* line 172, ../node_modules/font-awesome/scss/_icons.scss */
.fa-hand-o-up:before {
  content: "";
}

/* line 173, ../node_modules/font-awesome/scss/_icons.scss */
.fa-hand-o-down:before {
  content: "";
}

/* line 174, ../node_modules/font-awesome/scss/_icons.scss */
.fa-arrow-circle-left:before {
  content: "";
}

/* line 175, ../node_modules/font-awesome/scss/_icons.scss */
.fa-arrow-circle-right:before {
  content: "";
}

/* line 176, ../node_modules/font-awesome/scss/_icons.scss */
.fa-arrow-circle-up:before {
  content: "";
}

/* line 177, ../node_modules/font-awesome/scss/_icons.scss */
.fa-arrow-circle-down:before {
  content: "";
}

/* line 178, ../node_modules/font-awesome/scss/_icons.scss */
.fa-globe:before {
  content: "";
}

/* line 179, ../node_modules/font-awesome/scss/_icons.scss */
.fa-wrench:before {
  content: "";
}

/* line 180, ../node_modules/font-awesome/scss/_icons.scss */
.fa-tasks:before {
  content: "";
}

/* line 181, ../node_modules/font-awesome/scss/_icons.scss */
.fa-filter:before {
  content: "";
}

/* line 182, ../node_modules/font-awesome/scss/_icons.scss */
.fa-briefcase:before {
  content: "";
}

/* line 183, ../node_modules/font-awesome/scss/_icons.scss */
.fa-arrows-alt:before {
  content: "";
}

/* line 184, ../node_modules/font-awesome/scss/_icons.scss */
.fa-group:before,
.fa-users:before {
  content: "";
}

/* line 186, ../node_modules/font-awesome/scss/_icons.scss */
.fa-chain:before,
.fa-link:before {
  content: "";
}

/* line 188, ../node_modules/font-awesome/scss/_icons.scss */
.fa-cloud:before {
  content: "";
}

/* line 189, ../node_modules/font-awesome/scss/_icons.scss */
.fa-flask:before {
  content: "";
}

/* line 190, ../node_modules/font-awesome/scss/_icons.scss */
.fa-cut:before,
.fa-scissors:before {
  content: "";
}

/* line 192, ../node_modules/font-awesome/scss/_icons.scss */
.fa-copy:before,
.fa-files-o:before {
  content: "";
}

/* line 194, ../node_modules/font-awesome/scss/_icons.scss */
.fa-paperclip:before {
  content: "";
}

/* line 195, ../node_modules/font-awesome/scss/_icons.scss */
.fa-save:before,
.fa-floppy-o:before {
  content: "";
}

/* line 197, ../node_modules/font-awesome/scss/_icons.scss */
.fa-square:before {
  content: "";
}

/* line 198, ../node_modules/font-awesome/scss/_icons.scss */
.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
  content: "";
}

/* line 201, ../node_modules/font-awesome/scss/_icons.scss */
.fa-list-ul:before {
  content: "";
}

/* line 202, ../node_modules/font-awesome/scss/_icons.scss */
.fa-list-ol:before {
  content: "";
}

/* line 203, ../node_modules/font-awesome/scss/_icons.scss */
.fa-strikethrough:before {
  content: "";
}

/* line 204, ../node_modules/font-awesome/scss/_icons.scss */
.fa-underline:before {
  content: "";
}

/* line 205, ../node_modules/font-awesome/scss/_icons.scss */
.fa-table:before {
  content: "";
}

/* line 206, ../node_modules/font-awesome/scss/_icons.scss */
.fa-magic:before {
  content: "";
}

/* line 207, ../node_modules/font-awesome/scss/_icons.scss */
.fa-truck:before {
  content: "";
}

/* line 208, ../node_modules/font-awesome/scss/_icons.scss */
.fa-pinterest:before {
  content: "";
}

/* line 209, ../node_modules/font-awesome/scss/_icons.scss */
.fa-pinterest-square:before {
  content: "";
}

/* line 210, ../node_modules/font-awesome/scss/_icons.scss */
.fa-google-plus-square:before {
  content: "";
}

/* line 211, ../node_modules/font-awesome/scss/_icons.scss */
.fa-google-plus:before {
  content: "";
}

/* line 212, ../node_modules/font-awesome/scss/_icons.scss */
.fa-money:before {
  content: "";
}

/* line 213, ../node_modules/font-awesome/scss/_icons.scss */
.fa-caret-down:before {
  content: "";
}

/* line 214, ../node_modules/font-awesome/scss/_icons.scss */
.fa-caret-up:before {
  content: "";
}

/* line 215, ../node_modules/font-awesome/scss/_icons.scss */
.fa-caret-left:before {
  content: "";
}

/* line 216, ../node_modules/font-awesome/scss/_icons.scss */
.fa-caret-right:before {
  content: "";
}

/* line 217, ../node_modules/font-awesome/scss/_icons.scss */
.fa-columns:before {
  content: "";
}

/* line 218, ../node_modules/font-awesome/scss/_icons.scss */
.fa-unsorted:before,
.fa-sort:before {
  content: "";
}

/* line 220, ../node_modules/font-awesome/scss/_icons.scss */
.fa-sort-down:before,
.fa-sort-desc:before {
  content: "";
}

/* line 222, ../node_modules/font-awesome/scss/_icons.scss */
.fa-sort-up:before,
.fa-sort-asc:before {
  content: "";
}

/* line 224, ../node_modules/font-awesome/scss/_icons.scss */
.fa-envelope:before {
  content: "";
}

/* line 225, ../node_modules/font-awesome/scss/_icons.scss */
.fa-linkedin:before {
  content: "";
}

/* line 226, ../node_modules/font-awesome/scss/_icons.scss */
.fa-rotate-left:before,
.fa-undo:before {
  content: "";
}

/* line 228, ../node_modules/font-awesome/scss/_icons.scss */
.fa-legal:before,
.fa-gavel:before {
  content: "";
}

/* line 230, ../node_modules/font-awesome/scss/_icons.scss */
.fa-dashboard:before,
.fa-tachometer:before {
  content: "";
}

/* line 232, ../node_modules/font-awesome/scss/_icons.scss */
.fa-comment-o:before {
  content: "";
}

/* line 233, ../node_modules/font-awesome/scss/_icons.scss */
.fa-comments-o:before {
  content: "";
}

/* line 234, ../node_modules/font-awesome/scss/_icons.scss */
.fa-flash:before,
.fa-bolt:before {
  content: "";
}

/* line 236, ../node_modules/font-awesome/scss/_icons.scss */
.fa-sitemap:before {
  content: "";
}

/* line 237, ../node_modules/font-awesome/scss/_icons.scss */
.fa-umbrella:before {
  content: "";
}

/* line 238, ../node_modules/font-awesome/scss/_icons.scss */
.fa-paste:before,
.fa-clipboard:before {
  content: "";
}

/* line 240, ../node_modules/font-awesome/scss/_icons.scss */
.fa-lightbulb-o:before {
  content: "";
}

/* line 241, ../node_modules/font-awesome/scss/_icons.scss */
.fa-exchange:before {
  content: "";
}

/* line 242, ../node_modules/font-awesome/scss/_icons.scss */
.fa-cloud-download:before {
  content: "";
}

/* line 243, ../node_modules/font-awesome/scss/_icons.scss */
.fa-cloud-upload:before {
  content: "";
}

/* line 244, ../node_modules/font-awesome/scss/_icons.scss */
.fa-user-md:before {
  content: "";
}

/* line 245, ../node_modules/font-awesome/scss/_icons.scss */
.fa-stethoscope:before {
  content: "";
}

/* line 246, ../node_modules/font-awesome/scss/_icons.scss */
.fa-suitcase:before {
  content: "";
}

/* line 247, ../node_modules/font-awesome/scss/_icons.scss */
.fa-bell-o:before {
  content: "";
}

/* line 248, ../node_modules/font-awesome/scss/_icons.scss */
.fa-coffee:before {
  content: "";
}

/* line 249, ../node_modules/font-awesome/scss/_icons.scss */
.fa-cutlery:before {
  content: "";
}

/* line 250, ../node_modules/font-awesome/scss/_icons.scss */
.fa-file-text-o:before {
  content: "";
}

/* line 251, ../node_modules/font-awesome/scss/_icons.scss */
.fa-building-o:before {
  content: "";
}

/* line 252, ../node_modules/font-awesome/scss/_icons.scss */
.fa-hospital-o:before {
  content: "";
}

/* line 253, ../node_modules/font-awesome/scss/_icons.scss */
.fa-ambulance:before {
  content: "";
}

/* line 254, ../node_modules/font-awesome/scss/_icons.scss */
.fa-medkit:before {
  content: "";
}

/* line 255, ../node_modules/font-awesome/scss/_icons.scss */
.fa-fighter-jet:before {
  content: "";
}

/* line 256, ../node_modules/font-awesome/scss/_icons.scss */
.fa-beer:before {
  content: "";
}

/* line 257, ../node_modules/font-awesome/scss/_icons.scss */
.fa-h-square:before {
  content: "";
}

/* line 258, ../node_modules/font-awesome/scss/_icons.scss */
.fa-plus-square:before {
  content: "";
}

/* line 259, ../node_modules/font-awesome/scss/_icons.scss */
.fa-angle-double-left:before {
  content: "";
}

/* line 260, ../node_modules/font-awesome/scss/_icons.scss */
.fa-angle-double-right:before {
  content: "";
}

/* line 261, ../node_modules/font-awesome/scss/_icons.scss */
.fa-angle-double-up:before {
  content: "";
}

/* line 262, ../node_modules/font-awesome/scss/_icons.scss */
.fa-angle-double-down:before {
  content: "";
}

/* line 263, ../node_modules/font-awesome/scss/_icons.scss */
.fa-angle-left:before {
  content: "";
}

/* line 264, ../node_modules/font-awesome/scss/_icons.scss */
.fa-angle-right:before {
  content: "";
}

/* line 265, ../node_modules/font-awesome/scss/_icons.scss */
.fa-angle-up:before {
  content: "";
}

/* line 266, ../node_modules/font-awesome/scss/_icons.scss */
.fa-angle-down:before {
  content: "";
}

/* line 267, ../node_modules/font-awesome/scss/_icons.scss */
.fa-desktop:before {
  content: "";
}

/* line 268, ../node_modules/font-awesome/scss/_icons.scss */
.fa-laptop:before {
  content: "";
}

/* line 269, ../node_modules/font-awesome/scss/_icons.scss */
.fa-tablet:before {
  content: "";
}

/* line 270, ../node_modules/font-awesome/scss/_icons.scss */
.fa-mobile-phone:before,
.fa-mobile:before {
  content: "";
}

/* line 272, ../node_modules/font-awesome/scss/_icons.scss */
.fa-circle-o:before {
  content: "";
}

/* line 273, ../node_modules/font-awesome/scss/_icons.scss */
.fa-quote-left:before {
  content: "";
}

/* line 274, ../node_modules/font-awesome/scss/_icons.scss */
.fa-quote-right:before {
  content: "";
}

/* line 275, ../node_modules/font-awesome/scss/_icons.scss */
.fa-spinner:before {
  content: "";
}

/* line 276, ../node_modules/font-awesome/scss/_icons.scss */
.fa-circle:before {
  content: "";
}

/* line 277, ../node_modules/font-awesome/scss/_icons.scss */
.fa-mail-reply:before,
.fa-reply:before {
  content: "";
}

/* line 279, ../node_modules/font-awesome/scss/_icons.scss */
.fa-github-alt:before {
  content: "";
}

/* line 280, ../node_modules/font-awesome/scss/_icons.scss */
.fa-folder-o:before {
  content: "";
}

/* line 281, ../node_modules/font-awesome/scss/_icons.scss */
.fa-folder-open-o:before {
  content: "";
}

/* line 282, ../node_modules/font-awesome/scss/_icons.scss */
.fa-smile-o:before {
  content: "";
}

/* line 283, ../node_modules/font-awesome/scss/_icons.scss */
.fa-frown-o:before {
  content: "";
}

/* line 284, ../node_modules/font-awesome/scss/_icons.scss */
.fa-meh-o:before {
  content: "";
}

/* line 285, ../node_modules/font-awesome/scss/_icons.scss */
.fa-gamepad:before {
  content: "";
}

/* line 286, ../node_modules/font-awesome/scss/_icons.scss */
.fa-keyboard-o:before {
  content: "";
}

/* line 287, ../node_modules/font-awesome/scss/_icons.scss */
.fa-flag-o:before {
  content: "";
}

/* line 288, ../node_modules/font-awesome/scss/_icons.scss */
.fa-flag-checkered:before {
  content: "";
}

/* line 289, ../node_modules/font-awesome/scss/_icons.scss */
.fa-terminal:before {
  content: "";
}

/* line 290, ../node_modules/font-awesome/scss/_icons.scss */
.fa-code:before {
  content: "";
}

/* line 291, ../node_modules/font-awesome/scss/_icons.scss */
.fa-mail-reply-all:before,
.fa-reply-all:before {
  content: "";
}

/* line 293, ../node_modules/font-awesome/scss/_icons.scss */
.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
  content: "";
}

/* line 296, ../node_modules/font-awesome/scss/_icons.scss */
.fa-location-arrow:before {
  content: "";
}

/* line 297, ../node_modules/font-awesome/scss/_icons.scss */
.fa-crop:before {
  content: "";
}

/* line 298, ../node_modules/font-awesome/scss/_icons.scss */
.fa-code-fork:before {
  content: "";
}

/* line 299, ../node_modules/font-awesome/scss/_icons.scss */
.fa-unlink:before,
.fa-chain-broken:before {
  content: "";
}

/* line 301, ../node_modules/font-awesome/scss/_icons.scss */
.fa-question:before {
  content: "";
}

/* line 302, ../node_modules/font-awesome/scss/_icons.scss */
.fa-info:before {
  content: "";
}

/* line 303, ../node_modules/font-awesome/scss/_icons.scss */
.fa-exclamation:before {
  content: "";
}

/* line 304, ../node_modules/font-awesome/scss/_icons.scss */
.fa-superscript:before {
  content: "";
}

/* line 305, ../node_modules/font-awesome/scss/_icons.scss */
.fa-subscript:before {
  content: "";
}

/* line 306, ../node_modules/font-awesome/scss/_icons.scss */
.fa-eraser:before {
  content: "";
}

/* line 307, ../node_modules/font-awesome/scss/_icons.scss */
.fa-puzzle-piece:before {
  content: "";
}

/* line 308, ../node_modules/font-awesome/scss/_icons.scss */
.fa-microphone:before {
  content: "";
}

/* line 309, ../node_modules/font-awesome/scss/_icons.scss */
.fa-microphone-slash:before {
  content: "";
}

/* line 310, ../node_modules/font-awesome/scss/_icons.scss */
.fa-shield:before {
  content: "";
}

/* line 311, ../node_modules/font-awesome/scss/_icons.scss */
.fa-calendar-o:before {
  content: "";
}

/* line 312, ../node_modules/font-awesome/scss/_icons.scss */
.fa-fire-extinguisher:before {
  content: "";
}

/* line 313, ../node_modules/font-awesome/scss/_icons.scss */
.fa-rocket:before {
  content: "";
}

/* line 314, ../node_modules/font-awesome/scss/_icons.scss */
.fa-maxcdn:before {
  content: "";
}

/* line 315, ../node_modules/font-awesome/scss/_icons.scss */
.fa-chevron-circle-left:before {
  content: "";
}

/* line 316, ../node_modules/font-awesome/scss/_icons.scss */
.fa-chevron-circle-right:before {
  content: "";
}

/* line 317, ../node_modules/font-awesome/scss/_icons.scss */
.fa-chevron-circle-up:before {
  content: "";
}

/* line 318, ../node_modules/font-awesome/scss/_icons.scss */
.fa-chevron-circle-down:before {
  content: "";
}

/* line 319, ../node_modules/font-awesome/scss/_icons.scss */
.fa-html5:before {
  content: "";
}

/* line 320, ../node_modules/font-awesome/scss/_icons.scss */
.fa-css3:before {
  content: "";
}

/* line 321, ../node_modules/font-awesome/scss/_icons.scss */
.fa-anchor:before {
  content: "";
}

/* line 322, ../node_modules/font-awesome/scss/_icons.scss */
.fa-unlock-alt:before {
  content: "";
}

/* line 323, ../node_modules/font-awesome/scss/_icons.scss */
.fa-bullseye:before {
  content: "";
}

/* line 324, ../node_modules/font-awesome/scss/_icons.scss */
.fa-ellipsis-h:before {
  content: "";
}

/* line 325, ../node_modules/font-awesome/scss/_icons.scss */
.fa-ellipsis-v:before {
  content: "";
}

/* line 326, ../node_modules/font-awesome/scss/_icons.scss */
.fa-rss-square:before {
  content: "";
}

/* line 327, ../node_modules/font-awesome/scss/_icons.scss */
.fa-play-circle:before {
  content: "";
}

/* line 328, ../node_modules/font-awesome/scss/_icons.scss */
.fa-ticket:before {
  content: "";
}

/* line 329, ../node_modules/font-awesome/scss/_icons.scss */
.fa-minus-square:before {
  content: "";
}

/* line 330, ../node_modules/font-awesome/scss/_icons.scss */
.fa-minus-square-o:before {
  content: "";
}

/* line 331, ../node_modules/font-awesome/scss/_icons.scss */
.fa-level-up:before {
  content: "";
}

/* line 332, ../node_modules/font-awesome/scss/_icons.scss */
.fa-level-down:before {
  content: "";
}

/* line 333, ../node_modules/font-awesome/scss/_icons.scss */
.fa-check-square:before {
  content: "";
}

/* line 334, ../node_modules/font-awesome/scss/_icons.scss */
.fa-pencil-square:before {
  content: "";
}

/* line 335, ../node_modules/font-awesome/scss/_icons.scss */
.fa-external-link-square:before {
  content: "";
}

/* line 336, ../node_modules/font-awesome/scss/_icons.scss */
.fa-share-square:before {
  content: "";
}

/* line 337, ../node_modules/font-awesome/scss/_icons.scss */
.fa-compass:before {
  content: "";
}

/* line 338, ../node_modules/font-awesome/scss/_icons.scss */
.fa-toggle-down:before,
.fa-caret-square-o-down:before {
  content: "";
}

/* line 340, ../node_modules/font-awesome/scss/_icons.scss */
.fa-toggle-up:before,
.fa-caret-square-o-up:before {
  content: "";
}

/* line 342, ../node_modules/font-awesome/scss/_icons.scss */
.fa-toggle-right:before,
.fa-caret-square-o-right:before {
  content: "";
}

/* line 344, ../node_modules/font-awesome/scss/_icons.scss */
.fa-euro:before,
.fa-eur:before {
  content: "";
}

/* line 346, ../node_modules/font-awesome/scss/_icons.scss */
.fa-gbp:before {
  content: "";
}

/* line 347, ../node_modules/font-awesome/scss/_icons.scss */
.fa-dollar:before,
.fa-usd:before {
  content: "";
}

/* line 349, ../node_modules/font-awesome/scss/_icons.scss */
.fa-rupee:before,
.fa-inr:before {
  content: "";
}

/* line 351, ../node_modules/font-awesome/scss/_icons.scss */
.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
  content: "";
}

/* line 355, ../node_modules/font-awesome/scss/_icons.scss */
.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
  content: "";
}

/* line 358, ../node_modules/font-awesome/scss/_icons.scss */
.fa-won:before,
.fa-krw:before {
  content: "";
}

/* line 360, ../node_modules/font-awesome/scss/_icons.scss */
.fa-bitcoin:before,
.fa-btc:before {
  content: "";
}

/* line 362, ../node_modules/font-awesome/scss/_icons.scss */
.fa-file:before {
  content: "";
}

/* line 363, ../node_modules/font-awesome/scss/_icons.scss */
.fa-file-text:before {
  content: "";
}

/* line 364, ../node_modules/font-awesome/scss/_icons.scss */
.fa-sort-alpha-asc:before {
  content: "";
}

/* line 365, ../node_modules/font-awesome/scss/_icons.scss */
.fa-sort-alpha-desc:before {
  content: "";
}

/* line 366, ../node_modules/font-awesome/scss/_icons.scss */
.fa-sort-amount-asc:before {
  content: "";
}

/* line 367, ../node_modules/font-awesome/scss/_icons.scss */
.fa-sort-amount-desc:before {
  content: "";
}

/* line 368, ../node_modules/font-awesome/scss/_icons.scss */
.fa-sort-numeric-asc:before {
  content: "";
}

/* line 369, ../node_modules/font-awesome/scss/_icons.scss */
.fa-sort-numeric-desc:before {
  content: "";
}

/* line 370, ../node_modules/font-awesome/scss/_icons.scss */
.fa-thumbs-up:before {
  content: "";
}

/* line 371, ../node_modules/font-awesome/scss/_icons.scss */
.fa-thumbs-down:before {
  content: "";
}

/* line 372, ../node_modules/font-awesome/scss/_icons.scss */
.fa-youtube-square:before {
  content: "";
}

/* line 373, ../node_modules/font-awesome/scss/_icons.scss */
.fa-youtube:before {
  content: "";
}

/* line 374, ../node_modules/font-awesome/scss/_icons.scss */
.fa-xing:before {
  content: "";
}

/* line 375, ../node_modules/font-awesome/scss/_icons.scss */
.fa-xing-square:before {
  content: "";
}

/* line 376, ../node_modules/font-awesome/scss/_icons.scss */
.fa-youtube-play:before {
  content: "";
}

/* line 377, ../node_modules/font-awesome/scss/_icons.scss */
.fa-dropbox:before {
  content: "";
}

/* line 378, ../node_modules/font-awesome/scss/_icons.scss */
.fa-stack-overflow:before {
  content: "";
}

/* line 379, ../node_modules/font-awesome/scss/_icons.scss */
.fa-instagram:before {
  content: "";
}

/* line 380, ../node_modules/font-awesome/scss/_icons.scss */
.fa-flickr:before {
  content: "";
}

/* line 381, ../node_modules/font-awesome/scss/_icons.scss */
.fa-adn:before {
  content: "";
}

/* line 382, ../node_modules/font-awesome/scss/_icons.scss */
.fa-bitbucket:before {
  content: "";
}

/* line 383, ../node_modules/font-awesome/scss/_icons.scss */
.fa-bitbucket-square:before {
  content: "";
}

/* line 384, ../node_modules/font-awesome/scss/_icons.scss */
.fa-tumblr:before {
  content: "";
}

/* line 385, ../node_modules/font-awesome/scss/_icons.scss */
.fa-tumblr-square:before {
  content: "";
}

/* line 386, ../node_modules/font-awesome/scss/_icons.scss */
.fa-long-arrow-down:before {
  content: "";
}

/* line 387, ../node_modules/font-awesome/scss/_icons.scss */
.fa-long-arrow-up:before {
  content: "";
}

/* line 388, ../node_modules/font-awesome/scss/_icons.scss */
.fa-long-arrow-left:before {
  content: "";
}

/* line 389, ../node_modules/font-awesome/scss/_icons.scss */
.fa-long-arrow-right:before {
  content: "";
}

/* line 390, ../node_modules/font-awesome/scss/_icons.scss */
.fa-apple:before {
  content: "";
}

/* line 391, ../node_modules/font-awesome/scss/_icons.scss */
.fa-windows:before {
  content: "";
}

/* line 392, ../node_modules/font-awesome/scss/_icons.scss */
.fa-android:before {
  content: "";
}

/* line 393, ../node_modules/font-awesome/scss/_icons.scss */
.fa-linux:before {
  content: "";
}

/* line 394, ../node_modules/font-awesome/scss/_icons.scss */
.fa-dribbble:before {
  content: "";
}

/* line 395, ../node_modules/font-awesome/scss/_icons.scss */
.fa-skype:before {
  content: "";
}

/* line 396, ../node_modules/font-awesome/scss/_icons.scss */
.fa-foursquare:before {
  content: "";
}

/* line 397, ../node_modules/font-awesome/scss/_icons.scss */
.fa-trello:before {
  content: "";
}

/* line 398, ../node_modules/font-awesome/scss/_icons.scss */
.fa-female:before {
  content: "";
}

/* line 399, ../node_modules/font-awesome/scss/_icons.scss */
.fa-male:before {
  content: "";
}

/* line 400, ../node_modules/font-awesome/scss/_icons.scss */
.fa-gittip:before {
  content: "";
}

/* line 401, ../node_modules/font-awesome/scss/_icons.scss */
.fa-sun-o:before {
  content: "";
}

/* line 402, ../node_modules/font-awesome/scss/_icons.scss */
.fa-moon-o:before {
  content: "";
}

/* line 403, ../node_modules/font-awesome/scss/_icons.scss */
.fa-archive:before {
  content: "";
}

/* line 404, ../node_modules/font-awesome/scss/_icons.scss */
.fa-bug:before {
  content: "";
}

/* line 405, ../node_modules/font-awesome/scss/_icons.scss */
.fa-vk:before {
  content: "";
}

/* line 406, ../node_modules/font-awesome/scss/_icons.scss */
.fa-weibo:before {
  content: "";
}

/* line 407, ../node_modules/font-awesome/scss/_icons.scss */
.fa-renren:before {
  content: "";
}

/* line 408, ../node_modules/font-awesome/scss/_icons.scss */
.fa-pagelines:before {
  content: "";
}

/* line 409, ../node_modules/font-awesome/scss/_icons.scss */
.fa-stack-exchange:before {
  content: "";
}

/* line 410, ../node_modules/font-awesome/scss/_icons.scss */
.fa-arrow-circle-o-right:before {
  content: "";
}

/* line 411, ../node_modules/font-awesome/scss/_icons.scss */
.fa-arrow-circle-o-left:before {
  content: "";
}

/* line 412, ../node_modules/font-awesome/scss/_icons.scss */
.fa-toggle-left:before,
.fa-caret-square-o-left:before {
  content: "";
}

/* line 414, ../node_modules/font-awesome/scss/_icons.scss */
.fa-dot-circle-o:before {
  content: "";
}

/* line 415, ../node_modules/font-awesome/scss/_icons.scss */
.fa-wheelchair:before {
  content: "";
}

/* line 416, ../node_modules/font-awesome/scss/_icons.scss */
.fa-vimeo-square:before {
  content: "";
}

/* line 417, ../node_modules/font-awesome/scss/_icons.scss */
.fa-turkish-lira:before,
.fa-try:before {
  content: "";
}

/* line 419, ../node_modules/font-awesome/scss/_icons.scss */
.fa-plus-square-o:before {
  content: "";
}

/* line 420, ../node_modules/font-awesome/scss/_icons.scss */
.fa-space-shuttle:before {
  content: "";
}

/* line 421, ../node_modules/font-awesome/scss/_icons.scss */
.fa-slack:before {
  content: "";
}

/* line 422, ../node_modules/font-awesome/scss/_icons.scss */
.fa-envelope-square:before {
  content: "";
}

/* line 423, ../node_modules/font-awesome/scss/_icons.scss */
.fa-wordpress:before {
  content: "";
}

/* line 424, ../node_modules/font-awesome/scss/_icons.scss */
.fa-openid:before {
  content: "";
}

/* line 425, ../node_modules/font-awesome/scss/_icons.scss */
.fa-institution:before,
.fa-bank:before,
.fa-university:before {
  content: "";
}

/* line 428, ../node_modules/font-awesome/scss/_icons.scss */
.fa-mortar-board:before,
.fa-graduation-cap:before {
  content: "";
}

/* line 430, ../node_modules/font-awesome/scss/_icons.scss */
.fa-yahoo:before {
  content: "";
}

/* line 431, ../node_modules/font-awesome/scss/_icons.scss */
.fa-google:before {
  content: "";
}

/* line 432, ../node_modules/font-awesome/scss/_icons.scss */
.fa-reddit:before {
  content: "";
}

/* line 433, ../node_modules/font-awesome/scss/_icons.scss */
.fa-reddit-square:before {
  content: "";
}

/* line 434, ../node_modules/font-awesome/scss/_icons.scss */
.fa-stumbleupon-circle:before {
  content: "";
}

/* line 435, ../node_modules/font-awesome/scss/_icons.scss */
.fa-stumbleupon:before {
  content: "";
}

/* line 436, ../node_modules/font-awesome/scss/_icons.scss */
.fa-delicious:before {
  content: "";
}

/* line 437, ../node_modules/font-awesome/scss/_icons.scss */
.fa-digg:before {
  content: "";
}

/* line 438, ../node_modules/font-awesome/scss/_icons.scss */
.fa-pied-piper:before {
  content: "";
}

/* line 439, ../node_modules/font-awesome/scss/_icons.scss */
.fa-pied-piper-alt:before {
  content: "";
}

/* line 440, ../node_modules/font-awesome/scss/_icons.scss */
.fa-drupal:before {
  content: "";
}

/* line 441, ../node_modules/font-awesome/scss/_icons.scss */
.fa-joomla:before {
  content: "";
}

/* line 442, ../node_modules/font-awesome/scss/_icons.scss */
.fa-language:before {
  content: "";
}

/* line 443, ../node_modules/font-awesome/scss/_icons.scss */
.fa-fax:before {
  content: "";
}

/* line 444, ../node_modules/font-awesome/scss/_icons.scss */
.fa-building:before {
  content: "";
}

/* line 445, ../node_modules/font-awesome/scss/_icons.scss */
.fa-child:before {
  content: "";
}

/* line 446, ../node_modules/font-awesome/scss/_icons.scss */
.fa-paw:before {
  content: "";
}

/* line 447, ../node_modules/font-awesome/scss/_icons.scss */
.fa-spoon:before {
  content: "";
}

/* line 448, ../node_modules/font-awesome/scss/_icons.scss */
.fa-cube:before {
  content: "";
}

/* line 449, ../node_modules/font-awesome/scss/_icons.scss */
.fa-cubes:before {
  content: "";
}

/* line 450, ../node_modules/font-awesome/scss/_icons.scss */
.fa-behance:before {
  content: "";
}

/* line 451, ../node_modules/font-awesome/scss/_icons.scss */
.fa-behance-square:before {
  content: "";
}

/* line 452, ../node_modules/font-awesome/scss/_icons.scss */
.fa-steam:before {
  content: "";
}

/* line 453, ../node_modules/font-awesome/scss/_icons.scss */
.fa-steam-square:before {
  content: "";
}

/* line 454, ../node_modules/font-awesome/scss/_icons.scss */
.fa-recycle:before {
  content: "";
}

/* line 455, ../node_modules/font-awesome/scss/_icons.scss */
.fa-automobile:before,
.fa-car:before {
  content: "";
}

/* line 457, ../node_modules/font-awesome/scss/_icons.scss */
.fa-cab:before,
.fa-taxi:before {
  content: "";
}

/* line 459, ../node_modules/font-awesome/scss/_icons.scss */
.fa-tree:before {
  content: "";
}

/* line 460, ../node_modules/font-awesome/scss/_icons.scss */
.fa-spotify:before {
  content: "";
}

/* line 461, ../node_modules/font-awesome/scss/_icons.scss */
.fa-deviantart:before {
  content: "";
}

/* line 462, ../node_modules/font-awesome/scss/_icons.scss */
.fa-soundcloud:before {
  content: "";
}

/* line 463, ../node_modules/font-awesome/scss/_icons.scss */
.fa-database:before {
  content: "";
}

/* line 464, ../node_modules/font-awesome/scss/_icons.scss */
.fa-file-pdf-o:before {
  content: "";
}

/* line 465, ../node_modules/font-awesome/scss/_icons.scss */
.fa-file-word-o:before {
  content: "";
}

/* line 466, ../node_modules/font-awesome/scss/_icons.scss */
.fa-file-excel-o:before {
  content: "";
}

/* line 467, ../node_modules/font-awesome/scss/_icons.scss */
.fa-file-powerpoint-o:before {
  content: "";
}

/* line 468, ../node_modules/font-awesome/scss/_icons.scss */
.fa-file-photo-o:before,
.fa-file-picture-o:before,
.fa-file-image-o:before {
  content: "";
}

/* line 471, ../node_modules/font-awesome/scss/_icons.scss */
.fa-file-zip-o:before,
.fa-file-archive-o:before {
  content: "";
}

/* line 473, ../node_modules/font-awesome/scss/_icons.scss */
.fa-file-sound-o:before,
.fa-file-audio-o:before {
  content: "";
}

/* line 475, ../node_modules/font-awesome/scss/_icons.scss */
.fa-file-movie-o:before,
.fa-file-video-o:before {
  content: "";
}

/* line 477, ../node_modules/font-awesome/scss/_icons.scss */
.fa-file-code-o:before {
  content: "";
}

/* line 478, ../node_modules/font-awesome/scss/_icons.scss */
.fa-vine:before {
  content: "";
}

/* line 479, ../node_modules/font-awesome/scss/_icons.scss */
.fa-codepen:before {
  content: "";
}

/* line 480, ../node_modules/font-awesome/scss/_icons.scss */
.fa-jsfiddle:before {
  content: "";
}

/* line 481, ../node_modules/font-awesome/scss/_icons.scss */
.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
  content: "";
}

/* line 486, ../node_modules/font-awesome/scss/_icons.scss */
.fa-circle-o-notch:before {
  content: "";
}

/* line 487, ../node_modules/font-awesome/scss/_icons.scss */
.fa-ra:before,
.fa-rebel:before {
  content: "";
}

/* line 489, ../node_modules/font-awesome/scss/_icons.scss */
.fa-ge:before,
.fa-empire:before {
  content: "";
}

/* line 491, ../node_modules/font-awesome/scss/_icons.scss */
.fa-git-square:before {
  content: "";
}

/* line 492, ../node_modules/font-awesome/scss/_icons.scss */
.fa-git:before {
  content: "";
}

/* line 493, ../node_modules/font-awesome/scss/_icons.scss */
.fa-hacker-news:before {
  content: "";
}

/* line 494, ../node_modules/font-awesome/scss/_icons.scss */
.fa-tencent-weibo:before {
  content: "";
}

/* line 495, ../node_modules/font-awesome/scss/_icons.scss */
.fa-qq:before {
  content: "";
}

/* line 496, ../node_modules/font-awesome/scss/_icons.scss */
.fa-wechat:before,
.fa-weixin:before {
  content: "";
}

/* line 498, ../node_modules/font-awesome/scss/_icons.scss */
.fa-send:before,
.fa-paper-plane:before {
  content: "";
}

/* line 500, ../node_modules/font-awesome/scss/_icons.scss */
.fa-send-o:before,
.fa-paper-plane-o:before {
  content: "";
}

/* line 502, ../node_modules/font-awesome/scss/_icons.scss */
.fa-history:before {
  content: "";
}

/* line 503, ../node_modules/font-awesome/scss/_icons.scss */
.fa-circle-thin:before {
  content: "";
}

/* line 504, ../node_modules/font-awesome/scss/_icons.scss */
.fa-header:before {
  content: "";
}

/* line 505, ../node_modules/font-awesome/scss/_icons.scss */
.fa-paragraph:before {
  content: "";
}

/* line 506, ../node_modules/font-awesome/scss/_icons.scss */
.fa-sliders:before {
  content: "";
}

/* line 507, ../node_modules/font-awesome/scss/_icons.scss */
.fa-share-alt:before {
  content: "";
}

/* line 508, ../node_modules/font-awesome/scss/_icons.scss */
.fa-share-alt-square:before {
  content: "";
}

/* line 509, ../node_modules/font-awesome/scss/_icons.scss */
.fa-bomb:before {
  content: "";
}

/* line 510, ../node_modules/font-awesome/scss/_icons.scss */
.fa-soccer-ball-o:before,
.fa-futbol-o:before {
  content: "";
}

/* line 512, ../node_modules/font-awesome/scss/_icons.scss */
.fa-tty:before {
  content: "";
}

/* line 513, ../node_modules/font-awesome/scss/_icons.scss */
.fa-binoculars:before {
  content: "";
}

/* line 514, ../node_modules/font-awesome/scss/_icons.scss */
.fa-plug:before {
  content: "";
}

/* line 515, ../node_modules/font-awesome/scss/_icons.scss */
.fa-slideshare:before {
  content: "";
}

/* line 516, ../node_modules/font-awesome/scss/_icons.scss */
.fa-twitch:before {
  content: "";
}

/* line 517, ../node_modules/font-awesome/scss/_icons.scss */
.fa-yelp:before {
  content: "";
}

/* line 518, ../node_modules/font-awesome/scss/_icons.scss */
.fa-newspaper-o:before {
  content: "";
}

/* line 519, ../node_modules/font-awesome/scss/_icons.scss */
.fa-wifi:before {
  content: "";
}

/* line 520, ../node_modules/font-awesome/scss/_icons.scss */
.fa-calculator:before {
  content: "";
}

/* line 521, ../node_modules/font-awesome/scss/_icons.scss */
.fa-paypal:before {
  content: "";
}

/* line 522, ../node_modules/font-awesome/scss/_icons.scss */
.fa-google-wallet:before {
  content: "";
}

/* line 523, ../node_modules/font-awesome/scss/_icons.scss */
.fa-cc-visa:before {
  content: "";
}

/* line 524, ../node_modules/font-awesome/scss/_icons.scss */
.fa-cc-mastercard:before {
  content: "";
}

/* line 525, ../node_modules/font-awesome/scss/_icons.scss */
.fa-cc-discover:before {
  content: "";
}

/* line 526, ../node_modules/font-awesome/scss/_icons.scss */
.fa-cc-amex:before {
  content: "";
}

/* line 527, ../node_modules/font-awesome/scss/_icons.scss */
.fa-cc-paypal:before {
  content: "";
}

/* line 528, ../node_modules/font-awesome/scss/_icons.scss */
.fa-cc-stripe:before {
  content: "";
}

/* line 529, ../node_modules/font-awesome/scss/_icons.scss */
.fa-bell-slash:before {
  content: "";
}

/* line 530, ../node_modules/font-awesome/scss/_icons.scss */
.fa-bell-slash-o:before {
  content: "";
}

/* line 531, ../node_modules/font-awesome/scss/_icons.scss */
.fa-trash:before {
  content: "";
}

/* line 532, ../node_modules/font-awesome/scss/_icons.scss */
.fa-copyright:before {
  content: "";
}

/* line 533, ../node_modules/font-awesome/scss/_icons.scss */
.fa-at:before {
  content: "";
}

/* line 534, ../node_modules/font-awesome/scss/_icons.scss */
.fa-eyedropper:before {
  content: "";
}

/* line 535, ../node_modules/font-awesome/scss/_icons.scss */
.fa-paint-brush:before {
  content: "";
}

/* line 536, ../node_modules/font-awesome/scss/_icons.scss */
.fa-birthday-cake:before {
  content: "";
}

/* line 537, ../node_modules/font-awesome/scss/_icons.scss */
.fa-area-chart:before {
  content: "";
}

/* line 538, ../node_modules/font-awesome/scss/_icons.scss */
.fa-pie-chart:before {
  content: "";
}

/* line 539, ../node_modules/font-awesome/scss/_icons.scss */
.fa-line-chart:before {
  content: "";
}

/* line 540, ../node_modules/font-awesome/scss/_icons.scss */
.fa-lastfm:before {
  content: "";
}

/* line 541, ../node_modules/font-awesome/scss/_icons.scss */
.fa-lastfm-square:before {
  content: "";
}

/* line 542, ../node_modules/font-awesome/scss/_icons.scss */
.fa-toggle-off:before {
  content: "";
}

/* line 543, ../node_modules/font-awesome/scss/_icons.scss */
.fa-toggle-on:before {
  content: "";
}

/* line 544, ../node_modules/font-awesome/scss/_icons.scss */
.fa-bicycle:before {
  content: "";
}

/* line 545, ../node_modules/font-awesome/scss/_icons.scss */
.fa-bus:before {
  content: "";
}

/* line 546, ../node_modules/font-awesome/scss/_icons.scss */
.fa-ioxhost:before {
  content: "";
}

/* line 547, ../node_modules/font-awesome/scss/_icons.scss */
.fa-angellist:before {
  content: "";
}

/* line 548, ../node_modules/font-awesome/scss/_icons.scss */
.fa-cc:before {
  content: "";
}

/* line 549, ../node_modules/font-awesome/scss/_icons.scss */
.fa-shekel:before,
.fa-sheqel:before,
.fa-ils:before {
  content: "";
}

/* line 552, ../node_modules/font-awesome/scss/_icons.scss */
.fa-meanpath:before {
  content: "";
}

/* Transition mixins */
/* Button Mixins */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/* line 9, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* line 19, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
body {
  margin: 0;
}

/* line 33, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/* line 54, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

/* line 67, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
audio:not([controls]) {
  display: none;
  height: 0;
}

/* line 77, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
[hidden],
template {
  display: none;
}

/* line 89, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
a {
  background-color: transparent;
}

/* line 97, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
a:active,
a:hover {
  outline: 0;
}

/* line 109, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
abbr[title] {
  border-bottom: 1px dotted;
}

/* line 117, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
b,
strong {
  font-weight: bold;
}

/* line 126, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
dfn {
  font-style: italic;
}

/* line 135, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* line 144, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
mark {
  background: #ff0;
  color: #000;
}

/* line 153, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
small {
  font-size: 80%;
}

/* line 161, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

/* line 169, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
sup {
  top: -0.5em;
}

/* line 173, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
sub {
  bottom: -0.25em;
}

/* line 184, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
img {
  border: 0;
}

/* line 192, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
svg:not(:root) {
  overflow: hidden;
}

/* line 203, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
figure {
  margin: 1em 40px;
}

/* line 211, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/* line 221, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
pre {
  overflow: auto;
}

/* line 229, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* line 252, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

/* line 266, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
button {
  overflow: visible;
}

/* line 277, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
button,
select {
  text-transform: none;
}

/* line 290, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

/* line 302, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
button[disabled],
html input[disabled] {
  cursor: default;
}

/* line 311, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* line 322, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
input {
  line-height: normal;
}

/* line 334, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

/* line 346, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/* line 357, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

/* line 370, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* line 379, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/* line 390, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
legend {
  border: 0;
  padding: 0;
}

/* line 399, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
textarea {
  overflow: auto;
}

/* line 408, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
optgroup {
  font-weight: bold;
}

/* line 419, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 424, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */
td,
th {
  padding: 0;
}

/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print {
  /* line 9, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* line 18, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */
  a,
  a:visited {
    text-decoration: underline;
  }

  /* line 23, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */
  a[href]:after {
    content: " (" attr(href) ")";
  }

  /* line 27, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */
  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  /* line 33, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  /* line 38, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /* line 44, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */
  thead {
    display: table-header-group;
  }

  /* line 48, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */
  tr,
  img {
    page-break-inside: avoid;
  }

  /* line 53, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */
  img {
    max-width: 100% !important;
  }

  /* line 57, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  /* line 64, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */
  h2,
  h3 {
    page-break-after: avoid;
  }

  /* line 73, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */
  select {
    background: #fff !important;
  }

  /* line 78, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */
  .navbar {
    display: none;
  }

  /* line 83, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }

  /* line 87, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */
  .label {
    border: 1px solid #000;
  }

  /* line 91, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */
  .table {
    border-collapse: collapse !important;
  }
  /* line 94, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */
  .table td,
  .table th {
    background-color: #fff !important;
  }

  /* line 100, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}
/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* line 22, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */
html {
  font-size: 10px;
  -webkit-tap-highlight-color: transparent;
}

/* line 27, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */
body {
  font-family: "Source Sans Pro", "SourceSansPro", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #686868;
  background-color: transparent;
}

/* line 36, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* line 48, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */
a {
  color: #2185c5;
  text-decoration: none;
}
/* line 52, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */
a:hover, a:focus {
  color: #243640;
  text-decoration: underline;
}
/* line 58, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

/* line 69, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */
figure {
  margin: 0;
}

/* line 76, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */
img {
  vertical-align: middle;
}

/* line 81, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

/* line 86, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */
.img-rounded {
  border-radius: 6px;
}

/* line 93, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */
.img-thumbnail {
  padding: 4px;
  line-height: 1.5;
  background-color: transparent;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* line 106, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */
.img-circle {
  border-radius: 50%;
}

/* line 113, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */
hr {
  margin-top: 24px;
  margin-bottom: 24px;
  border: 0;
  border-top: 1px solid #eeeeee;
}

/* line 125, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* line 141, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */
.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

/* line 9, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
h1, h2, h3, h4, h5, h6,
.h1,
.form-contenteditable input.form-control, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 400;
  line-height: 1.5;
}
/* line 16, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
h1 small,
h1 .small, h2 small,
h2 .small, h3 small,
h3 .small, h4 small,
h4 .small, h5 small,
h5 .small, h6 small,
h6 .small,
.h1 small,
.form-contenteditable input.form-control small,
.h1 .small,
.form-contenteditable input.form-control .small, .h2 small,
.h2 .small, .h3 small,
.h3 .small, .h4 small,
.h4 .small, .h5 small,
.h5 .small, .h6 small,
.h6 .small {
  font-weight: normal;
  line-height: 1;
  color: #999999;
}

/* line 24, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
h1, .h1, .form-contenteditable input.form-control,
h2, .h2,
h3, .h3 {
  margin-top: 24px;
  margin-bottom: 12px;
}
/* line 30, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
h1 small,
h1 .small, .h1 small, .form-contenteditable input.form-control small,
.h1 .small,
.form-contenteditable input.form-control .small,
h2 small,
h2 .small, .h2 small,
.h2 .small,
h3 small,
h3 .small, .h3 small,
.h3 .small {
  font-size: 65%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: 12px;
  margin-bottom: 12px;
}
/* line 41, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
h4 small,
h4 .small, .h4 small,
.h4 .small,
h5 small,
h5 .small, .h5 small,
.h5 .small,
h6 small,
h6 .small, .h6 small,
.h6 .small {
  font-size: 75%;
}

/* line 47, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
h1, .h1, .form-contenteditable input.form-control {
  font-size: 31px;
}

/* line 48, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
h2, .h2 {
  font-size: 25px;
}

/* line 49, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
h3, .h3 {
  font-size: 20px;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
h4, .h4 {
  font-size: 18px;
}

/* line 51, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
h5, .h5 {
  font-size: 16px;
}

/* line 52, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
h6, .h6 {
  font-size: 13px;
}

/* line 58, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
p {
  margin: 0 0 12px;
}

/* line 62, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.lead {
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
}
@media (min-width: 768px) {
  /* line 62, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
  .lead {
    font-size: 24px;
  }
}

/* line 78, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
small,
.small {
  font-size: 87%;
}

/* line 83, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
mark,
.mark {
  background-color: #F9F3C3;
  padding: .2em;
}

/* line 90, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.text-left {
  text-align: left;
}

/* line 91, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.text-right {
  text-align: right;
}

/* line 92, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.text-center {
  text-align: center;
}

/* line 93, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.text-justify {
  text-align: justify;
}

/* line 94, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.text-nowrap {
  white-space: nowrap;
}

/* line 97, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.text-lowercase {
  text-transform: lowercase;
}

/* line 98, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.text-uppercase {
  text-transform: uppercase;
}

/* line 99, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.text-capitalize {
  text-transform: capitalize;
}

/* line 102, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.text-muted {
  color: #ecefef !important;
}

/* line 5, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */
.text-primary {
  color: #1b92cb;
}

/* line 8, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */
a.text-primary:hover {
  color: #15729e;
}

/* line 5, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */
.text-success {
  color: #d4d9d9;
}

/* line 8, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */
a.text-success:hover {
  color: #b9c1c1;
}

/* line 5, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */
.text-info {
  color: #8e8837;
}

/* line 8, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */
a.text-info:hover {
  color: #696529;
}

/* line 5, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */
.text-warning {
  color: #B59033;
}

/* line 8, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */
a.text-warning:hover {
  color: #8d7028;
}

/* line 5, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */
.text-danger {
  color: #ff434c;
}

/* line 8, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */
a.text-danger:hover {
  color: #ff101b;
}

/* line 119, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.bg-primary {
  color: #fff;
}

/* line 5, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */
.bg-primary {
  background-color: #1b92cb;
}

/* line 8, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */
a.bg-primary:hover {
  background-color: #15729e;
}

/* line 5, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */
.bg-success {
  background-color: #686868;
}

/* line 8, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */
a.bg-success:hover {
  background-color: #4e4e4e;
}

/* line 5, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */
.bg-info {
  background-color: #e2df80;
}

/* line 8, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */
a.bg-info:hover {
  background-color: #d9d556;
}

/* line 5, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */
.bg-warning {
  background-color: #F9F3C3;
}

/* line 8, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */
a.bg-warning:hover {
  background-color: #f4ea95;
}

/* line 5, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */
.bg-danger {
  background-color: #febfc1;
}

/* line 8, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */
a.bg-danger:hover {
  background-color: #fd8d90;
}

/* line 138, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.page-header {
  padding-bottom: 11px;
  margin: 48px 0 24px;
  border-bottom: 1px solid #eeeeee;
}

/* line 149, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
ul,
ol {
  margin-top: 0;
  margin-bottom: 12px;
}
/* line 153, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
ul ul,
ul ol,
ol ul,
ol ol {
  margin-bottom: 0;
}

/* line 167, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.list-unstyled, .list-cards, .tab-responsive .tab-content {
  padding-left: 0;
  list-style: none;
}

/* line 173, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.list-inline, .list-inline-divider, .list-breadcrumb, .list-vertical-divider, .list-vertical-divider-2, .list-steps {
  padding-left: 0;
  list-style: none;
  margin-left: -5px;
}
/* line 177, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.list-inline > li, .list-inline-divider > li, .list-breadcrumb > li, .list-vertical-divider > li, .list-vertical-divider-2 > li, .list-steps > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}

/* line 185, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
dl {
  margin-top: 0;
  margin-bottom: 24px;
}

/* line 189, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
dt,
dd {
  line-height: 1.5;
}

/* line 193, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
dt {
  font-weight: bold;
}

/* line 196, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
dd {
  margin-left: 0;
}

/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.dl-horizontal dd:before, .dl-horizontal dd:after {
  content: " ";
  display: table;
}
/* line 19, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.dl-horizontal dd:after {
  clear: both;
}
@media (min-width: 768px) {
  /* line 211, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
  .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* line 218, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
  .dl-horizontal dd {
    margin-left: 180px;
  }
}

/* line 229, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
abbr[title],
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #999999;
}

/* line 235, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

/* line 241, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
blockquote {
  padding: 12px 24px;
  margin: 0 0 24px;
  font-size: 20px;
  border-left: 5px solid #eeeeee;
}
/* line 250, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
  margin-bottom: 0;
}
/* line 257, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
blockquote footer,
blockquote small,
blockquote .small {
  display: block;
  font-size: 80%;
  line-height: 1.5;
  color: #999999;
}
/* line 265, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
blockquote footer:before,
blockquote small:before,
blockquote .small:before {
  content: '\2014 \00A0';
}

/* line 274, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.blockquote-reverse,
blockquote.pull-right {
  padding-right: 15px;
  padding-left: 0;
  border-right: 5px solid #eeeeee;
  border-left: 0;
  text-align: right;
}
/* line 286, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.blockquote-reverse footer:before,
.blockquote-reverse small:before,
.blockquote-reverse .small:before,
blockquote.pull-right footer:before,
blockquote.pull-right small:before,
blockquote.pull-right .small:before {
  content: '';
}
/* line 287, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
.blockquote-reverse footer:after,
.blockquote-reverse small:after,
.blockquote-reverse .small:after,
blockquote.pull-right footer:after,
blockquote.pull-right small:after,
blockquote.pull-right .small:after {
  content: '\00A0 \2014';
}

/* line 294, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */
address {
  margin-bottom: 24px;
  font-style: normal;
  line-height: 1.5;
}

/* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_code.scss */
code,
kbd,
pre,
samp {
  font-family: Menlo, Consolas, "Courier New", monospace;
}

/* line 15, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_code.scss */
code {
  padding: 2px 4px;
  font-size: 90%;
  background-color: #F8F8F8;
  border-radius: 4px;
}

/* line 24, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_code.scss */
kbd {
  padding: 2px 4px;
  font-size: 90%;
  color: #fff;
  background-color: #333;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
/* line 32, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_code.scss */
kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: bold;
  box-shadow: none;
}

/* line 41, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_code.scss */
pre {
  display: block;
  padding: 11.5px;
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  word-break: break-all;
  word-wrap: break-word;
  color: #333333;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}
/* line 55, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_code.scss */
pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre-wrap;
  background-color: transparent;
  border-radius: 0;
}

/* line 66, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_code.scss */
.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

/* line 10, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_grid.scss */
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
}
/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.container:before, .container:after {
  content: " ";
  display: table;
}
/* line 19, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.container:after {
  clear: both;
}
@media (min-width: 768px) {
  /* line 10, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_grid.scss */
  .container {
    width: 740px;
  }
}
@media (min-width: 992px) {
  /* line 10, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_grid.scss */
  .container {
    width: 960px;
  }
}
@media (min-width: 1200px) {
  /* line 10, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_grid.scss */
  .container {
    width: 1160px;
  }
}

/* line 30, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_grid.scss */
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
}
/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.container-fluid:before, .container-fluid:after {
  content: " ";
  display: table;
}
/* line 19, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.container-fluid:after {
  clear: both;
}

/* line 39, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_grid.scss */
.row {
  margin-left: -10px;
  margin-right: -10px;
}
/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.row:before, .row:after {
  content: " ";
  display: table;
}
/* line 19, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.row:after {
  clear: both;
}

/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xs-13, .col-sm-13, .col-md-13, .col-lg-13, .col-xs-14, .col-sm-14, .col-md-14, .col-lg-14, .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15, .col-xs-16, .col-sm-16, .col-md-16, .col-lg-16, .col-xs-17, .col-sm-17, .col-md-17, .col-lg-17, .col-xs-18, .col-sm-18, .col-md-18, .col-lg-18, .col-xs-19, .col-sm-19, .col-md-19, .col-lg-19, .col-xs-20, .col-sm-20, .col-md-20, .col-lg-20, .col-xs-21, .col-sm-21, .col-md-21, .col-lg-21, .col-xs-22, .col-sm-22, .col-md-22, .col-lg-22, .col-xs-23, .col-sm-23, .col-md-23, .col-lg-23, .col-xs-24, .col-sm-24, .col-md-24, .col-lg-24 {
  position: relative;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
}

/* line 27, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-13, .col-xs-14, .col-xs-15, .col-xs-16, .col-xs-17, .col-xs-18, .col-xs-19, .col-xs-20, .col-xs-21, .col-xs-22, .col-xs-23, .col-xs-24 {
  float: left;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-1 {
  width: 4.16667%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-2 {
  width: 8.33333%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-3 {
  width: 12.5%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-4 {
  width: 16.66667%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-5 {
  width: 20.83333%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-6 {
  width: 25%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-7 {
  width: 29.16667%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-8 {
  width: 33.33333%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-9 {
  width: 37.5%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-10 {
  width: 41.66667%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-11 {
  width: 45.83333%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-12 {
  width: 50%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-13 {
  width: 54.16667%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-14 {
  width: 58.33333%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-15 {
  width: 62.5%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-16 {
  width: 66.66667%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-17 {
  width: 70.83333%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-18 {
  width: 75%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-19 {
  width: 79.16667%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-20 {
  width: 83.33333%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-21 {
  width: 87.5%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-22 {
  width: 91.66667%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-23 {
  width: 95.83333%;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-24 {
  width: 100%;
}

/* line 55, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-0 {
  right: auto;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-1 {
  right: 4.16667%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-2 {
  right: 8.33333%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-3 {
  right: 12.5%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-4 {
  right: 16.66667%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-5 {
  right: 20.83333%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-6 {
  right: 25%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-7 {
  right: 29.16667%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-8 {
  right: 33.33333%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-9 {
  right: 37.5%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-10 {
  right: 41.66667%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-11 {
  right: 45.83333%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-12 {
  right: 50%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-13 {
  right: 54.16667%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-14 {
  right: 58.33333%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-15 {
  right: 62.5%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-16 {
  right: 66.66667%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-17 {
  right: 70.83333%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-18 {
  right: 75%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-19 {
  right: 79.16667%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-20 {
  right: 83.33333%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-21 {
  right: 87.5%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-22 {
  right: 91.66667%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-23 {
  right: 95.83333%;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-pull-24 {
  right: 100%;
}

/* line 45, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-0 {
  left: auto;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-1 {
  left: 4.16667%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-2 {
  left: 8.33333%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-3 {
  left: 12.5%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-4 {
  left: 16.66667%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-5 {
  left: 20.83333%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-6 {
  left: 25%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-7 {
  left: 29.16667%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-8 {
  left: 33.33333%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-9 {
  left: 37.5%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-10 {
  left: 41.66667%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-11 {
  left: 45.83333%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-12 {
  left: 50%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-13 {
  left: 54.16667%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-14 {
  left: 58.33333%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-15 {
  left: 62.5%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-16 {
  left: 66.66667%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-17 {
  left: 70.83333%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-18 {
  left: 75%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-19 {
  left: 79.16667%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-20 {
  left: 83.33333%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-21 {
  left: 87.5%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-22 {
  left: 91.66667%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-23 {
  left: 95.83333%;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-push-24 {
  left: 100%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-0 {
  margin-left: 0%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-1 {
  margin-left: 4.16667%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-2 {
  margin-left: 8.33333%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-3 {
  margin-left: 12.5%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-4 {
  margin-left: 16.66667%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-5 {
  margin-left: 20.83333%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-6 {
  margin-left: 25%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-7 {
  margin-left: 29.16667%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-8 {
  margin-left: 33.33333%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-9 {
  margin-left: 37.5%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-10 {
  margin-left: 41.66667%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-11 {
  margin-left: 45.83333%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-12 {
  margin-left: 50%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-13 {
  margin-left: 54.16667%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-14 {
  margin-left: 58.33333%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-15 {
  margin-left: 62.5%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-16 {
  margin-left: 66.66667%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-17 {
  margin-left: 70.83333%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-18 {
  margin-left: 75%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-19 {
  margin-left: 79.16667%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-20 {
  margin-left: 83.33333%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-21 {
  margin-left: 87.5%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-22 {
  margin-left: 91.66667%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-23 {
  margin-left: 95.83333%;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
.col-xs-offset-24 {
  margin-left: 100%;
}

@media (min-width: 768px) {
  /* line 27, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-13, .col-sm-14, .col-sm-15, .col-sm-16, .col-sm-17, .col-sm-18, .col-sm-19, .col-sm-20, .col-sm-21, .col-sm-22, .col-sm-23, .col-sm-24 {
    float: left;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-1 {
    width: 4.16667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-2 {
    width: 8.33333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-3 {
    width: 12.5%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-4 {
    width: 16.66667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-5 {
    width: 20.83333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-6 {
    width: 25%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-7 {
    width: 29.16667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-8 {
    width: 33.33333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-9 {
    width: 37.5%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-10 {
    width: 41.66667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-11 {
    width: 45.83333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-12 {
    width: 50%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-13 {
    width: 54.16667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-14 {
    width: 58.33333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-15 {
    width: 62.5%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-16 {
    width: 66.66667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-17 {
    width: 70.83333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-18 {
    width: 75%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-19 {
    width: 79.16667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-20 {
    width: 83.33333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-21 {
    width: 87.5%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-22 {
    width: 91.66667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-23 {
    width: 95.83333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-24 {
    width: 100%;
  }

  /* line 55, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-0 {
    right: auto;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-1 {
    right: 4.16667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-2 {
    right: 8.33333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-3 {
    right: 12.5%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-4 {
    right: 16.66667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-5 {
    right: 20.83333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-6 {
    right: 25%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-7 {
    right: 29.16667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-8 {
    right: 33.33333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-9 {
    right: 37.5%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-10 {
    right: 41.66667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-11 {
    right: 45.83333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-12 {
    right: 50%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-13 {
    right: 54.16667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-14 {
    right: 58.33333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-15 {
    right: 62.5%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-16 {
    right: 66.66667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-17 {
    right: 70.83333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-18 {
    right: 75%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-19 {
    right: 79.16667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-20 {
    right: 83.33333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-21 {
    right: 87.5%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-22 {
    right: 91.66667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-23 {
    right: 95.83333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-pull-24 {
    right: 100%;
  }

  /* line 45, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-0 {
    left: auto;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-1 {
    left: 4.16667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-2 {
    left: 8.33333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-3 {
    left: 12.5%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-4 {
    left: 16.66667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-5 {
    left: 20.83333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-6 {
    left: 25%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-7 {
    left: 29.16667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-8 {
    left: 33.33333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-9 {
    left: 37.5%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-10 {
    left: 41.66667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-11 {
    left: 45.83333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-12 {
    left: 50%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-13 {
    left: 54.16667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-14 {
    left: 58.33333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-15 {
    left: 62.5%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-16 {
    left: 66.66667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-17 {
    left: 70.83333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-18 {
    left: 75%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-19 {
    left: 79.16667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-20 {
    left: 83.33333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-21 {
    left: 87.5%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-22 {
    left: 91.66667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-23 {
    left: 95.83333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-push-24 {
    left: 100%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-0 {
    margin-left: 0%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-1 {
    margin-left: 4.16667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-2 {
    margin-left: 8.33333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-3 {
    margin-left: 12.5%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-4 {
    margin-left: 16.66667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-5 {
    margin-left: 20.83333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-6 {
    margin-left: 25%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-7 {
    margin-left: 29.16667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-8 {
    margin-left: 33.33333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-9 {
    margin-left: 37.5%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-10 {
    margin-left: 41.66667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-11 {
    margin-left: 45.83333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-12 {
    margin-left: 50%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-13 {
    margin-left: 54.16667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-14 {
    margin-left: 58.33333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-15 {
    margin-left: 62.5%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-16 {
    margin-left: 66.66667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-17 {
    margin-left: 70.83333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-18 {
    margin-left: 75%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-19 {
    margin-left: 79.16667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-20 {
    margin-left: 83.33333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-21 {
    margin-left: 87.5%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-22 {
    margin-left: 91.66667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-23 {
    margin-left: 95.83333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-sm-offset-24 {
    margin-left: 100%;
  }
}
@media (min-width: 992px) {
  /* line 27, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-13, .col-md-14, .col-md-15, .col-md-16, .col-md-17, .col-md-18, .col-md-19, .col-md-20, .col-md-21, .col-md-22, .col-md-23, .col-md-24 {
    float: left;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-1 {
    width: 4.16667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-2 {
    width: 8.33333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-3 {
    width: 12.5%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-4 {
    width: 16.66667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-5 {
    width: 20.83333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-6 {
    width: 25%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-7 {
    width: 29.16667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-8 {
    width: 33.33333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-9 {
    width: 37.5%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-10 {
    width: 41.66667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-11 {
    width: 45.83333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-12 {
    width: 50%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-13 {
    width: 54.16667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-14 {
    width: 58.33333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-15 {
    width: 62.5%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-16 {
    width: 66.66667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-17 {
    width: 70.83333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-18 {
    width: 75%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-19 {
    width: 79.16667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-20 {
    width: 83.33333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-21 {
    width: 87.5%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-22 {
    width: 91.66667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-23 {
    width: 95.83333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-24 {
    width: 100%;
  }

  /* line 55, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-0 {
    right: auto;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-1 {
    right: 4.16667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-2 {
    right: 8.33333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-3 {
    right: 12.5%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-4 {
    right: 16.66667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-5 {
    right: 20.83333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-6 {
    right: 25%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-7 {
    right: 29.16667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-8 {
    right: 33.33333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-9 {
    right: 37.5%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-10 {
    right: 41.66667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-11 {
    right: 45.83333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-12 {
    right: 50%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-13 {
    right: 54.16667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-14 {
    right: 58.33333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-15 {
    right: 62.5%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-16 {
    right: 66.66667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-17 {
    right: 70.83333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-18 {
    right: 75%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-19 {
    right: 79.16667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-20 {
    right: 83.33333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-21 {
    right: 87.5%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-22 {
    right: 91.66667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-23 {
    right: 95.83333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-pull-24 {
    right: 100%;
  }

  /* line 45, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-0 {
    left: auto;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-1 {
    left: 4.16667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-2 {
    left: 8.33333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-3 {
    left: 12.5%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-4 {
    left: 16.66667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-5 {
    left: 20.83333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-6 {
    left: 25%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-7 {
    left: 29.16667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-8 {
    left: 33.33333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-9 {
    left: 37.5%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-10 {
    left: 41.66667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-11 {
    left: 45.83333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-12 {
    left: 50%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-13 {
    left: 54.16667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-14 {
    left: 58.33333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-15 {
    left: 62.5%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-16 {
    left: 66.66667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-17 {
    left: 70.83333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-18 {
    left: 75%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-19 {
    left: 79.16667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-20 {
    left: 83.33333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-21 {
    left: 87.5%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-22 {
    left: 91.66667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-23 {
    left: 95.83333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-push-24 {
    left: 100%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-0 {
    margin-left: 0%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-1 {
    margin-left: 4.16667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-2 {
    margin-left: 8.33333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-3 {
    margin-left: 12.5%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-4 {
    margin-left: 16.66667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-5 {
    margin-left: 20.83333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-6 {
    margin-left: 25%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-7 {
    margin-left: 29.16667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-8 {
    margin-left: 33.33333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-9 {
    margin-left: 37.5%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-10 {
    margin-left: 41.66667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-11 {
    margin-left: 45.83333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-12 {
    margin-left: 50%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-13 {
    margin-left: 54.16667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-14 {
    margin-left: 58.33333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-15 {
    margin-left: 62.5%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-16 {
    margin-left: 66.66667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-17 {
    margin-left: 70.83333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-18 {
    margin-left: 75%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-19 {
    margin-left: 79.16667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-20 {
    margin-left: 83.33333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-21 {
    margin-left: 87.5%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-22 {
    margin-left: 91.66667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-23 {
    margin-left: 95.83333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-md-offset-24 {
    margin-left: 100%;
  }
}
@media (min-width: 1200px) {
  /* line 27, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-13, .col-lg-14, .col-lg-15, .col-lg-16, .col-lg-17, .col-lg-18, .col-lg-19, .col-lg-20, .col-lg-21, .col-lg-22, .col-lg-23, .col-lg-24 {
    float: left;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-1 {
    width: 4.16667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-2 {
    width: 8.33333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-3 {
    width: 12.5%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-4 {
    width: 16.66667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-5 {
    width: 20.83333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-6 {
    width: 25%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-7 {
    width: 29.16667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-8 {
    width: 33.33333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-9 {
    width: 37.5%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-10 {
    width: 41.66667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-11 {
    width: 45.83333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-12 {
    width: 50%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-13 {
    width: 54.16667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-14 {
    width: 58.33333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-15 {
    width: 62.5%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-16 {
    width: 66.66667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-17 {
    width: 70.83333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-18 {
    width: 75%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-19 {
    width: 79.16667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-20 {
    width: 83.33333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-21 {
    width: 87.5%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-22 {
    width: 91.66667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-23 {
    width: 95.83333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-24 {
    width: 100%;
  }

  /* line 55, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-0 {
    right: auto;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-1 {
    right: 4.16667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-2 {
    right: 8.33333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-3 {
    right: 12.5%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-4 {
    right: 16.66667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-5 {
    right: 20.83333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-6 {
    right: 25%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-7 {
    right: 29.16667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-8 {
    right: 33.33333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-9 {
    right: 37.5%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-10 {
    right: 41.66667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-11 {
    right: 45.83333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-12 {
    right: 50%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-13 {
    right: 54.16667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-14 {
    right: 58.33333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-15 {
    right: 62.5%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-16 {
    right: 66.66667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-17 {
    right: 70.83333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-18 {
    right: 75%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-19 {
    right: 79.16667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-20 {
    right: 83.33333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-21 {
    right: 87.5%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-22 {
    right: 91.66667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-23 {
    right: 95.83333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-pull-24 {
    right: 100%;
  }

  /* line 45, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-0 {
    left: auto;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-1 {
    left: 4.16667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-2 {
    left: 8.33333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-3 {
    left: 12.5%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-4 {
    left: 16.66667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-5 {
    left: 20.83333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-6 {
    left: 25%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-7 {
    left: 29.16667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-8 {
    left: 33.33333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-9 {
    left: 37.5%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-10 {
    left: 41.66667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-11 {
    left: 45.83333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-12 {
    left: 50%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-13 {
    left: 54.16667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-14 {
    left: 58.33333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-15 {
    left: 62.5%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-16 {
    left: 66.66667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-17 {
    left: 70.83333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-18 {
    left: 75%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-19 {
    left: 79.16667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-20 {
    left: 83.33333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-21 {
    left: 87.5%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-22 {
    left: 91.66667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-23 {
    left: 95.83333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-push-24 {
    left: 100%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-0 {
    margin-left: 0%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-1 {
    margin-left: 4.16667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-2 {
    margin-left: 8.33333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-3 {
    margin-left: 12.5%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-4 {
    margin-left: 16.66667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-5 {
    margin-left: 20.83333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-6 {
    margin-left: 25%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-7 {
    margin-left: 29.16667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-8 {
    margin-left: 33.33333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-9 {
    margin-left: 37.5%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-10 {
    margin-left: 41.66667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-11 {
    margin-left: 45.83333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-12 {
    margin-left: 50%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-13 {
    margin-left: 54.16667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-14 {
    margin-left: 58.33333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-15 {
    margin-left: 62.5%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-16 {
    margin-left: 66.66667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-17 {
    margin-left: 70.83333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-18 {
    margin-left: 75%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-19 {
    margin-left: 79.16667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-20 {
    margin-left: 83.33333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-21 {
    margin-left: 87.5%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-22 {
    margin-left: 91.66667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-23 {
    margin-left: 95.83333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-lg-offset-24 {
    margin-left: 100%;
  }
}
/* line 6, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
table {
  background-color: transparent;
}

/* line 9, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
caption {
  padding-top: 8px 14px;
  padding-bottom: 8px 14px;
  color: #ecefef !important;
  text-align: left;
}

/* line 15, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
th {
  text-align: left;
}

/* line 22, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 24px;
}
/* line 31, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
  padding: 8px 14px;
  line-height: 1.5;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
/* line 41, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
.table > caption + thead > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > th,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
/* line 57, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
.table > tbody + tbody {
  border-top: 2px solid #ddd;
}
/* line 62, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
.table .table {
  background-color: transparent;
}

/* line 75, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
.table-condensed > thead > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > tfoot > tr > td {
  padding: 5px;
}

/* line 88, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
.table-bordered {
  border: 1px solid #ddd;
}
/* line 94, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
/* line 101, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}

/* line 114, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
.table-striped > tbody > tr:nth-child(odd) {
  background-color: #F8F8F8;
}

/* line 125, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
.table-hover > tbody > tr:hover {
  background-color: transparent;
}

/* line 135, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
table col[class*="col-"] {
  position: static;
  float: none;
  display: table-column;
}

/* line 143, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  float: none;
  display: table-cell;
}

/* line 9, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */
.table > thead > tr > td.active,
.table > thead > tr > th.active, .table > thead > tr.active > td, .table > thead > tr.active > th,
.table > tbody > tr > td.active,
.table > tbody > tr > th.active,
.table > tbody > tr.active > td,
.table > tbody > tr.active > th,
.table > tfoot > tr > td.active,
.table > tfoot > tr > th.active,
.table > tfoot > tr.active > td,
.table > tfoot > tr.active > th {
  background-color: transparent;
}

/* line 20, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover, .table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr:hover > .active, .table-hover > tbody > tr.active:hover > th {
  background-color: transparent;
}

/* line 9, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */
.table > thead > tr > td.success,
.table > thead > tr > th.success, .table > thead > tr.success > td, .table > thead > tr.success > th,
.table > tbody > tr > td.success,
.table > tbody > tr > th.success,
.table > tbody > tr.success > td,
.table > tbody > tr.success > th,
.table > tfoot > tr > td.success,
.table > tfoot > tr > th.success,
.table > tfoot > tr.success > td,
.table > tfoot > tr.success > th {
  background-color: #686868;
}

/* line 20, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover, .table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr:hover > .success, .table-hover > tbody > tr.success:hover > th {
  background-color: #5b5b5b;
}

/* line 9, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */
.table > thead > tr > td.info,
.table > thead > tr > th.info, .table > thead > tr.info > td, .table > thead > tr.info > th,
.table > tbody > tr > td.info,
.table > tbody > tr > th.info,
.table > tbody > tr.info > td,
.table > tbody > tr.info > th,
.table > tfoot > tr > td.info,
.table > tfoot > tr > th.info,
.table > tfoot > tr.info > td,
.table > tfoot > tr.info > th {
  background-color: #e2df80;
}

/* line 20, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover, .table-hover > tbody > tr.info:hover > td, .table-hover > tbody > tr:hover > .info, .table-hover > tbody > tr.info:hover > th {
  background-color: #ddda6b;
}

/* line 9, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */
.table > thead > tr > td.warning,
.table > thead > tr > th.warning, .table > thead > tr.warning > td, .table > thead > tr.warning > th,
.table > tbody > tr > td.warning,
.table > tbody > tr > th.warning,
.table > tbody > tr.warning > td,
.table > tbody > tr.warning > th,
.table > tfoot > tr > td.warning,
.table > tfoot > tr > th.warning,
.table > tfoot > tr.warning > td,
.table > tfoot > tr.warning > th {
  background-color: #F9F3C3;
}

/* line 20, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover, .table-hover > tbody > tr.warning:hover > td, .table-hover > tbody > tr:hover > .warning, .table-hover > tbody > tr.warning:hover > th {
  background-color: #f7eeac;
}

/* line 9, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */
.table > thead > tr > td.danger,
.table > thead > tr > th.danger, .table > thead > tr.danger > td, .table > thead > tr.danger > th,
.table > tbody > tr > td.danger,
.table > tbody > tr > th.danger,
.table > tbody > tr.danger > td,
.table > tbody > tr.danger > th,
.table > tfoot > tr > td.danger,
.table > tfoot > tr > th.danger,
.table > tfoot > tr.danger > td,
.table > tfoot > tr.danger > th {
  background-color: #febfc1;
}

/* line 20, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */
.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover, .table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr:hover > .danger, .table-hover > tbody > tr.danger:hover > th {
  background-color: #fea6a9;
}

/* line 171, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
.table-responsive {
  overflow-x: auto;
  min-height: 0.01%;
}
@media screen and (max-width: 767px) {
  /* line 171, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
  .table-responsive {
    width: 100%;
    margin-bottom: 18px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
  /* line 183, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
  .table-responsive > .table {
    margin-bottom: 0;
  }
  /* line 191, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
  /* line 200, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
  .table-responsive > .table-bordered {
    border: 0;
  }
  /* line 208, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  /* line 212, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  /* line 225, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}

/* line 10, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0;
}

/* line 20, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 24px;
  font-size: 24px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

/* line 32, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}

/* line 47, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
input[type="search"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* line 52, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
input[type="file"] {
  display: block;
}

/* line 65, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
input[type="range"] {
  display: block;
  width: 100%;
}

/* line 71, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
select[multiple],
select[size] {
  height: auto;
}

/* line 77, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

/* line 84, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
output {
  display: block;
  padding-top: 9px;
  font-size: 16px;
  line-height: 1.5;
  color: #555555;
}

/* line 115, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.form-control {
  display: block;
  width: 100%;
  height: 42px;
  padding: 8px 20px;
  font-size: 16px;
  line-height: 1.5;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
/* line 57, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.form-control:focus {
  border-color: #49a8d5;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(73, 168, 213, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(73, 168, 213, 0.6);
}
/* line 103, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss */
.form-control::-moz-placeholder {
  color: #b4b4b4;
  opacity: 1;
}
/* line 107, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss */
.form-control:-ms-input-placeholder {
  color: #b4b4b4;
}
/* line 108, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss */
.form-control::-webkit-input-placeholder {
  color: #b4b4b4;
}
/* line 141, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  cursor: not-allowed;
  background-color: #eeeeee;
  opacity: 1;
}

/* line 153, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
textarea.form-control {
  height: auto;
}

/* line 165, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
input[type="search"] {
  -webkit-appearance: none;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  /* line 178, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"] {
    line-height: 42px;
  }

  /* line 184, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
  input[type="date"].input-sm,
  input[type="time"].input-sm,
  input[type="datetime-local"].input-sm,
  input[type="month"].input-sm {
    line-height: 27px;
  }

  /* line 190, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
  input[type="date"].input-lg,
  input[type="time"].input-lg,
  input[type="datetime-local"].input-lg,
  input[type="month"].input-lg {
    line-height: 48px;
  }
}
/* line 204, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.form-group {
  margin-bottom: 15px;
}

/* line 213, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.radio,
.checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}
/* line 220, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.radio label,
.checkbox label {
  min-height: 24px;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
}

/* line 228, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: absolute;
  margin-left: -20px;
  margin-top: 4px \9;
}

/* line 237, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.radio + .radio,
.checkbox + .checkbox {
  margin-top: -5px;
}

/* line 243, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.radio-inline,
.checkbox-inline {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  vertical-align: middle;
  font-weight: normal;
  cursor: pointer;
}

/* line 252, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px;
}

/* line 264, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
input[type="radio"][disabled], input[type="radio"].disabled, fieldset[disabled] input[type="radio"],
input[type="checkbox"][disabled],
input[type="checkbox"].disabled, fieldset[disabled]
input[type="checkbox"] {
  cursor: not-allowed;
}

/* line 273, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.radio-inline.disabled, fieldset[disabled] .radio-inline,
.checkbox-inline.disabled, fieldset[disabled]
.checkbox-inline {
  cursor: not-allowed;
}

/* line 283, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.radio.disabled label, fieldset[disabled] .radio label,
.checkbox.disabled label, fieldset[disabled]
.checkbox label {
  cursor: not-allowed;
}

/* line 295, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.form-control-static {
  padding-top: 9px;
  padding-bottom: 9px;
  margin-bottom: 0;
}
/* line 302, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.form-control-static.input-lg, .form-control-static.input-sm {
  padding-left: 0;
  padding-right: 0;
}

/* line 71, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.input-sm, .form-group-sm .form-control {
  height: 27px;
  padding: 2px 10px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 3px;
}

/* line 79, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
select.input-sm, .form-group-sm .form-control {
  height: 27px;
  line-height: 27px;
}

/* line 84, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
textarea.input-sm, .form-group-sm .form-control,
select[multiple].input-sm, .form-group-sm .form-control {
  height: auto;
}

/* line 71, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.input-lg, .form-group-lg .form-control {
  height: 48px;
  padding: 10px 26px;
  font-size: 20px;
  line-height: 1.33;
  border-radius: 6px;
}

/* line 79, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
select.input-lg, .form-group-lg .form-control {
  height: 48px;
  line-height: 48px;
}

/* line 84, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
textarea.input-lg, .form-group-lg .form-control,
select[multiple].input-lg, .form-group-lg .form-control {
  height: auto;
}

/* line 324, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.has-feedback {
  position: relative;
}
/* line 329, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.has-feedback .form-control {
  padding-right: 52.5px;
}

/* line 334, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.form-control-feedback {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: block;
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  pointer-events: none;
}

/* line 346, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.input-lg + .form-control-feedback {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

/* line 351, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.input-sm + .form-control-feedback {
  width: 27px;
  height: 27px;
  line-height: 27px;
}

/* line 8, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline, .has-success.radio label, .has-success.checkbox label, .has-success.radio-inline label, .has-success.checkbox-inline label {
  color: #d4d9d9;
}
/* line 21, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.has-success .form-control {
  border-color: #d4d9d9;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
/* line 24, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.has-success .form-control:focus {
  border-color: #b9c1c1;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px white;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px white;
}
/* line 31, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.has-success .input-group-addon {
  color: #d4d9d9;
  border-color: #d4d9d9;
  background-color: #686868;
}
/* line 37, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.has-success .form-control-feedback {
  color: #d4d9d9;
}

/* line 8, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline, .has-warning.radio label, .has-warning.checkbox label, .has-warning.radio-inline label, .has-warning.checkbox-inline label {
  color: #B59033;
}
/* line 21, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.has-warning .form-control {
  border-color: #B59033;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
/* line 24, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.has-warning .form-control:focus {
  border-color: #8d7028;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d8bc76;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d8bc76;
}
/* line 31, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.has-warning .input-group-addon {
  color: #B59033;
  border-color: #B59033;
  background-color: #F9F3C3;
}
/* line 37, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.has-warning .form-control-feedback {
  color: #B59033;
}

/* line 8, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label {
  color: #ff434c;
}
/* line 21, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.has-error .form-control {
  border-color: #ff434c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
/* line 24, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.has-error .form-control:focus {
  border-color: #ff101b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffa9ad;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffa9ad;
}
/* line 31, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.has-error .input-group-addon {
  color: #ff434c;
  border-color: #ff434c;
  background-color: #febfc1;
}
/* line 37, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.has-error .form-control-feedback {
  color: #ff434c;
}

/* line 371, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.has-feedback label ~ .form-control-feedback {
  top: 29px;
}
/* line 374, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.has-feedback label.sr-only ~ .form-control-feedback {
  top: 0;
}

/* line 385, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #a8a8a8;
}

@media (min-width: 768px) {
  /* line 410, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  /* line 417, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  /* line 424, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
  .form-inline .form-control-static {
    display: inline-block;
  }
  /* line 428, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
  .form-inline .input-group {
    display: inline-table;
    vertical-align: middle;
  }
  /* line 432, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
  .form-inline .input-group .input-group-addon,
  .form-inline .input-group .input-group-btn,
  .form-inline .input-group .form-control {
    width: auto;
  }
  /* line 440, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
  .form-inline .input-group > .form-control {
    width: 100%;
  }
  /* line 444, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
  .form-inline .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
  /* line 452, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
  .form-inline .radio,
  .form-inline .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }
  /* line 459, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
  .form-inline .radio label,
  .form-inline .checkbox label {
    padding-left: 0;
  }
  /* line 463, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
  .form-inline .radio input[type="radio"],
  .form-inline .checkbox input[type="checkbox"] {
    position: relative;
    margin-left: 0;
  }
  /* line 470, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}

/* line 492, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 9px;
}
/* line 502, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.form-horizontal .radio,
.form-horizontal .checkbox {
  min-height: 33px;
}
/* line 508, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.form-horizontal .form-group {
  margin-left: -10px;
  margin-right: -10px;
}
/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.form-horizontal .form-group:before, .form-horizontal .form-group:after {
  content: " ";
  display: table;
}
/* line 19, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.form-horizontal .form-group:after {
  clear: both;
}
@media (min-width: 768px) {
  /* line 515, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
  .form-horizontal .control-label {
    text-align: right;
    margin-bottom: 0;
    padding-top: 9px;
  }
}
/* line 526, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
.form-horizontal .has-feedback .form-control-feedback {
  right: 10px;
}
@media (min-width: 768px) {
  /* line 536, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
  .form-horizontal .form-group-lg .control-label {
    padding-top: 14.3px;
  }
}
@media (min-width: 768px) {
  /* line 543, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */
  .form-horizontal .form-group-sm .control-label {
    padding-top: 3px;
  }
}

/* line 9, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 8px 20px;
  font-size: 16px;
  line-height: 1.5;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* line 26, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn:focus, .btn.focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
/* line 32, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn:hover, .btn:focus, .btn.focus {
  color: #2185c5;
  text-decoration: none;
}
/* line 39, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn:active, .btn.active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
/* line 46, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn-default {
  color: #2185c5;
  background-color: rgba(255, 255, 255, 0.4);
  border-color: transparent;
}
/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .btn-default.dropdown-toggle {
  color: #2185c5;
  background-color: rgba(230, 230, 230, 0.4);
  border-color: transparent;
}
/* line 21, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-default:active, .btn-default.active, .open > .btn-default.dropdown-toggle {
  background-image: none;
}
/* line 29, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled.focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled].focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active {
  background-color: rgba(255, 255, 255, 0.4);
  border-color: transparent;
}
/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-default .badge {
  color: rgba(255, 255, 255, 0.4);
  background-color: #2185c5;
}

/* line 63, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn-primary {
  color: #2185c5;
  background-color: white;
  border-color: #49A8D5;
}
/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle {
  color: #2185c5;
  background-color: #e6e6e6;
  border-color: #2a89b7;
}
/* line 21, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle {
  background-image: none;
}
/* line 29, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary.active {
  background-color: white;
  border-color: #49A8D5;
}
/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-primary .badge {
  color: white;
  background-color: #2185c5;
}

/* line 67, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn-success {
  color: transparent;
  background-color: transparent;
  border-color: transparent;
}
/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-success:hover, .btn-success:focus, .btn-success.focus, .btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle {
  color: transparent;
  background-color: transparent;
  border-color: transparent;
}
/* line 21, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle {
  background-image: none;
}
/* line 29, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-success.disabled, .btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled.focus, .btn-success.disabled:active, .btn-success.disabled.active, .btn-success[disabled], .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled].focus, .btn-success[disabled]:active, .btn-success[disabled].active, fieldset[disabled] .btn-success, fieldset[disabled] .btn-success:hover, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:active, fieldset[disabled] .btn-success.active {
  background-color: transparent;
  border-color: transparent;
}
/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-success .badge {
  color: transparent;
  background-color: transparent;
}

/* line 71, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn-info {
  color: transparent;
  background-color: transparent;
  border-color: transparent;
}
/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle {
  color: transparent;
  background-color: transparent;
  border-color: transparent;
}
/* line 21, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle {
  background-image: none;
}
/* line 29, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-info.disabled, .btn-info.disabled:hover, .btn-info.disabled:focus, .btn-info.disabled.focus, .btn-info.disabled:active, .btn-info.disabled.active, .btn-info[disabled], .btn-info[disabled]:hover, .btn-info[disabled]:focus, .btn-info[disabled].focus, .btn-info[disabled]:active, .btn-info[disabled].active, fieldset[disabled] .btn-info, fieldset[disabled] .btn-info:hover, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info.focus, fieldset[disabled] .btn-info:active, fieldset[disabled] .btn-info.active {
  background-color: transparent;
  border-color: transparent;
}
/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-info .badge {
  color: transparent;
  background-color: transparent;
}

/* line 75, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn-warning {
  color: transparent;
  background-color: transparent;
  border-color: transparent;
}
/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-warning:hover, .btn-warning:focus, .btn-warning.focus, .btn-warning:active, .btn-warning.active, .open > .btn-warning.dropdown-toggle {
  color: transparent;
  background-color: transparent;
  border-color: transparent;
}
/* line 21, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-warning:active, .btn-warning.active, .open > .btn-warning.dropdown-toggle {
  background-image: none;
}
/* line 29, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-warning.disabled, .btn-warning.disabled:hover, .btn-warning.disabled:focus, .btn-warning.disabled.focus, .btn-warning.disabled:active, .btn-warning.disabled.active, .btn-warning[disabled], .btn-warning[disabled]:hover, .btn-warning[disabled]:focus, .btn-warning[disabled].focus, .btn-warning[disabled]:active, .btn-warning[disabled].active, fieldset[disabled] .btn-warning, fieldset[disabled] .btn-warning:hover, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning.focus, fieldset[disabled] .btn-warning:active, fieldset[disabled] .btn-warning.active {
  background-color: transparent;
  border-color: transparent;
}
/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-warning .badge {
  color: transparent;
  background-color: transparent;
}

/* line 79, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn-danger {
  color: white;
  background-color: #ff434c;
  border-color: #CA7070;
}
/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-danger:hover, .btn-danger:focus, .btn-danger.focus, .btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle {
  color: white;
  background-color: #ff101b;
  border-color: #b84444;
}
/* line 21, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle {
  background-image: none;
}
/* line 29, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-danger.disabled, .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled.focus, .btn-danger.disabled:active, .btn-danger.disabled.active, .btn-danger[disabled], .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled].focus, .btn-danger[disabled]:active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger, fieldset[disabled] .btn-danger:hover, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger.focus, fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger.active {
  background-color: #ff434c;
  border-color: #CA7070;
}
/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */
.btn-danger .badge {
  color: #ff434c;
  background-color: white;
}

/* line 88, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn-link {
  color: #2185c5;
  font-weight: normal;
  border-radius: 0;
}
/* line 93, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn-link, .btn-link:active, .btn-link.active, .btn-link[disabled], fieldset[disabled] .btn-link {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
/* line 101, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
  border-color: transparent;
}
/* line 107, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn-link:hover, .btn-link:focus {
  color: #243640;
  text-decoration: underline;
  background-color: transparent;
}
/* line 115, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn-link[disabled]:hover, .btn-link[disabled]:focus, fieldset[disabled] .btn-link:hover, fieldset[disabled] .btn-link:focus {
  color: #999999;
  text-decoration: none;
}

/* line 127, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn-lg, .btn-group-lg > .btn {
  padding: 10px 26px;
  font-size: 20px;
  line-height: 1.33;
  border-radius: 6px;
}

/* line 131, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn-sm, .btn-group-sm > .btn {
  padding: 2px 10px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 3px;
}

/* line 135, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn-xs, .btn-group-xs > .btn {
  padding: 1px 5px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 3px;
}

/* line 143, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn-block {
  display: block;
  width: 100%;
}

/* line 149, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
.btn-block + .btn-block {
  margin-top: 5px;
}

/* line 157, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}

/* line 10, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_component-animations.scss */
.fade, .fade-enter, .fade-leave {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
/* line 13, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_component-animations.scss */
.fade.in, .in.fade-enter, .fade-enter.fade-enter-active, .fade.fade-enter-active, .fade-enter-active.fade-leave, .in.fade-leave {
  opacity: 1;
}

/* line 18, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_component-animations.scss */
.collapse {
  display: none;
  visibility: hidden;
}
/* line 22, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_component-animations.scss */
.collapse.in, .collapse.fade-enter-active {
  display: block;
  visibility: visible;
}

/* line 27, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_component-animations.scss */
tr.collapse.in, tr.collapse.fade-enter-active {
  display: table-row;
}

/* line 29, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_component-animations.scss */
tbody.collapse.in, tbody.collapse.fade-enter-active {
  display: table-row-group;
}

/* line 31, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_component-animations.scss */
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}

/* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

/* line 19, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.dropdown {
  position: relative;
}

/* line 24, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.dropdown-toggle:focus {
  outline: 0;
}

/* line 29, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 16px;
  text-align: left;
  background-color: #F8F8F8;
  border: 1px solid transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}
/* line 52, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
/* line 58, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.dropdown-menu .divider {
  height: 1px;
  margin: 11px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
/* line 63, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.5;
  color: #333333;
  white-space: nowrap;
}

/* line 76, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}

/* line 86, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  background-color: #1b92cb;
}

/* line 101, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
  color: #999999;
}
/* line 108, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed;
}

/* line 121, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.open > .dropdown-menu {
  display: block;
}
/* line 126, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.open > a {
  outline: 0;
}

/* line 135, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.dropdown-menu-right {
  left: auto;
  right: 0;
}

/* line 145, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.dropdown-menu-left {
  left: 0;
  right: auto;
}

/* line 151, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #999999;
  white-space: nowrap;
}

/* line 161, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.dropdown-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 990;
}

/* line 171, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}

/* line 184, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  border-top: 0;
  border-bottom: 4px solid;
  content: "";
}
/* line 190, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 1px;
}

@media (min-width: 768px) {
  /* line 204, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
  .navbar-right .dropdown-menu {
    right: 0;
    left: auto;
  }
  /* line 209, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */
  .navbar-right .dropdown-menu-left {
    left: 0;
    right: auto;
  }
}
/* line 6, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  float: left;
}
/* line 15, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
.btn-group-vertical > .btn:hover,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
  z-index: 2;
}

/* line 26, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
  margin-left: -1px;
}

/* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-toolbar {
  margin-left: -5px;
}
/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.btn-toolbar:before, .btn-toolbar:after {
  content: " ";
  display: table;
}
/* line 19, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.btn-toolbar:after {
  clear: both;
}
/* line 39, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
  float: left;
}
/* line 43, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
  margin-left: 5px;
}

/* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0;
}

/* line 55, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group > .btn:first-child {
  margin-left: 0;
}
/* line 57, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

/* line 62, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

/* line 68, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group > .btn-group {
  float: left;
}

/* line 71, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}

/* line 75, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group > .btn-group:first-child > .btn:last-child,
.btn-group > .btn-group:first-child > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

/* line 80, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group > .btn-group:last-child > .btn:first-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

/* line 85, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}

/* line 104, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group > .btn + .dropdown-toggle {
  padding-left: 8px;
  padding-right: 8px;
}

/* line 108, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group > .btn-lg + .dropdown-toggle, .btn-group-lg.btn-group > .btn + .dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px;
}

/* line 115, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group.open .dropdown-toggle {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
/* line 119, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group.open .dropdown-toggle.btn-link {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* line 126, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn .caret {
  margin-left: 0;
}

/* line 130, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-lg .caret, .btn-group-lg > .btn .caret {
  border-width: 5px 5px 0;
  border-bottom-width: 0;
}

/* line 135, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.dropup .btn-lg .caret, .dropup .btn-group-lg > .btn .caret {
  border-width: 0 5px 5px;
}

/* line 144, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
}
/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after {
  content: " ";
  display: table;
}
/* line 19, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.btn-group-vertical > .btn-group:after {
  clear: both;
}
/* line 156, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group-vertical > .btn-group > .btn {
  float: none;
}
/* line 161, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
  margin-top: -1px;
  margin-left: 0;
}

/* line 171, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
/* line 174, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group-vertical > .btn:first-child:not(:last-child) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
/* line 178, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group-vertical > .btn:last-child:not(:first-child) {
  border-bottom-left-radius: 4px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

/* line 183, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}

/* line 187, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* line 192, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

/* line 200, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}
/* line 205, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
  float: none;
  display: table-cell;
  width: 1%;
}
/* line 211, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group-justified > .btn-group .btn {
  width: 100%;
}
/* line 215, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
.btn-group-justified > .btn-group .dropdown-menu {
  left: auto;
}

/* line 236, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */
[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

/* line 9, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.nav:before, .nav:after {
  content: " ";
  display: table;
}
/* line 19, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.nav:after {
  clear: both;
}
/* line 15, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav > li {
  position: relative;
  display: block;
}
/* line 19, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav > li > a {
  position: relative;
  display: block;
  padding: 5px 10px;
}
/* line 23, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav > li > a:hover, .nav > li > a:focus {
  text-decoration: none;
  background-color: transparent;
}
/* line 31, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav > li.disabled > a {
  color: #999999;
}
/* line 34, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav > li.disabled > a:hover, .nav > li.disabled > a:focus {
  color: #999999;
  text-decoration: none;
  background-color: transparent;
  cursor: not-allowed;
}
/* line 46, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
  background-color: transparent;
  border-color: #2185c5;
}
/* line 59, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav .nav-divider {
  height: 1px;
  margin: 11px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
/* line 66, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav > li > a > img {
  max-width: none;
}

/* line 76, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav-tabs {
  border-bottom: 1px solid #ddd;
}
/* line 78, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}
/* line 84, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.5;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}
/* line 89, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav-tabs > li > a:hover {
  border-color: #eeeeee #eeeeee #ddd;
}
/* line 96, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  color: #00776d;
  background-color: #ecefef;
  border: 1px solid #00776d;
  border-bottom-color: transparent;
  cursor: default;
}

/* line 118, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav-pills > li {
  float: left;
}
/* line 125, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav-pills > li + li {
  margin-left: 2px;
}

/* line 144, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav-stacked > li {
  float: none;
}
/* line 146, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav-stacked > li + li {
  margin-top: 2px;
  margin-left: 0;
}

/* line 160, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav-justified, .nav-tabs.nav-justified {
  width: 100%;
}
/* line 163, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav-justified > li, .nav-tabs.nav-justified > li {
  float: none;
}
/* line 165, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav-justified > li > a, .nav-tabs.nav-justified > li > a {
  text-align: center;
  margin-bottom: 5px;
}
/* line 171, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
@media (min-width: 768px) {
  /* line 177, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
  .nav-justified > li, .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  /* line 180, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
  .nav-justified > li > a, .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}

/* line 190, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav-tabs-justified, .nav-tabs.nav-justified {
  border-bottom: 0;
}
/* line 193, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav-tabs-justified > li > a, .nav-tabs.nav-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}
/* line 199, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav-tabs-justified > .active > a, .nav-tabs.nav-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus,
.nav-tabs.nav-justified > .active > a:focus {
  border: 1px solid #ddd;
}
@media (min-width: 768px) {
  /* line 206, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
  .nav-tabs-justified > li > a, .nav-tabs.nav-justified > li > a {
    border-bottom: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
  }
  /* line 210, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
  .nav-tabs-justified > .active > a, .nav-tabs.nav-justified > .active > a,
  .nav-tabs-justified > .active > a:hover,
  .nav-tabs.nav-justified > .active > a:hover,
  .nav-tabs-justified > .active > a:focus,
  .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: transparent;
  }
}

/* line 224, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.tab-content > .tab-pane {
  display: none;
  visibility: hidden;
}
/* line 228, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.tab-content > .active {
  display: block;
  visibility: visible;
}

/* line 239, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */
.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

/* line 5, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */
.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: white;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}
/* line 20, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */
.label:empty {
  display: none;
}
/* line 25, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */
.btn .label {
  position: relative;
  top: -1px;
}

/* line 33, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */
a.label:hover, a.label:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

/* line 44, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */
.label-default {
  background-color: #999999;
}
/* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_labels.scss */
.label-default[href]:hover, .label-default[href]:focus {
  background-color: gray;
}

/* line 48, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */
.label-primary {
  background-color: #00a79d;
}
/* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_labels.scss */
.label-primary[href]:hover, .label-primary[href]:focus {
  background-color: #00746d;
}

/* line 52, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */
.label-success {
  background-color: #5cb85c;
}
/* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_labels.scss */
.label-success[href]:hover, .label-success[href]:focus {
  background-color: #449d44;
}

/* line 56, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */
.label-info {
  background-color: #5bc0de;
}
/* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_labels.scss */
.label-info[href]:hover, .label-info[href]:focus {
  background-color: #31b0d5;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */
.label-warning {
  background-color: #f0ad4e;
}
/* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_labels.scss */
.label-warning[href]:hover, .label-warning[href]:focus {
  background-color: #ec971f;
}

/* line 64, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */
.label-danger {
  background-color: #CA7070;
}
/* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_labels.scss */
.label-danger[href]:hover, .label-danger[href]:focus {
  background-color: #bc4b4b;
}

/* line 9, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */
.alert {
  padding: 15px;
  margin-bottom: 24px;
  border: 1px solid transparent;
  border-radius: 0px;
}
/* line 16, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */
.alert h4 {
  margin-top: 0;
  color: inherit;
}
/* line 22, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */
.alert .alert-link {
  font-weight: inherit;
}
/* line 27, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */
.alert > p,
.alert > ul {
  margin-bottom: 0;
}
/* line 31, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */
.alert > p + p {
  margin-top: 5px;
}

/* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */
.alert-dismissable,
.alert-dismissible {
  padding-right: 35px;
}
/* line 45, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */
.alert-dismissable .close,
.alert-dismissible .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

/* line 57, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */
.alert-success {
  background-color: #AFD79B;
  border-color: #165450;
  color: #165450;
}
/* line 8, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss */
.alert-success hr {
  border-top-color: #11403d;
}
/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss */
.alert-success .alert-link {
  color: #0b2c2a;
}

/* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */
.alert-info {
  background-color: #c3f4ff;
  border-color: #8AC0C4;
  color: #1a739e;
}
/* line 8, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss */
.alert-info hr {
  border-top-color: #79b7bb;
}
/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss */
.alert-info .alert-link {
  color: #135372;
}

/* line 63, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */
.alert-warning {
  background-color: #F9F3C3;
  border-color: #B59033;
  color: #B59033;
}
/* line 8, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss */
.alert-warning hr {
  border-top-color: #a1802d;
}
/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss */
.alert-warning .alert-link {
  color: #8d7028;
}

/* line 66, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */
.alert-danger, .alert-error {
  background-color: #febfc1;
  border-color: #febfc1;
  color: #b31612;
}
/* line 8, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss */
.alert-danger hr, .alert-error hr {
  border-top-color: #fea6a9;
}
/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss */
.alert-danger .alert-link, .alert-error .alert-link {
  color: #85100d;
}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
/* line 26, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_progress-bars.scss */
.progress {
  overflow: hidden;
  height: 24px;
  margin-bottom: 24px;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* line 36, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_progress-bars.scss */
.progress-bar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: 14px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  background-color: #1b92cb;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-transition: width 0.6s ease;
  -o-transition: width 0.6s ease;
  transition: width 0.6s ease;
}

/* line 54, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_progress-bars.scss */
.progress-striped .progress-bar,
.progress-bar-striped {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  background-size: 40px 40px;
}

/* line 64, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_progress-bars.scss */
.progress.active .progress-bar,
.progress-bar.active {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  -o-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
}

/* line 73, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_progress-bars.scss */
.progress-bar-success {
  background-color: #5cb85c;
}
/* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_progress-bar.scss */
.progress-striped .progress-bar-success {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
}

/* line 77, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_progress-bars.scss */
.progress-bar-info {
  background-color: #5bc0de;
}
/* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_progress-bar.scss */
.progress-striped .progress-bar-info {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
}

/* line 81, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_progress-bars.scss */
.progress-bar-warning {
  background-color: #f0ad4e;
}
/* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_progress-bar.scss */
.progress-striped .progress-bar-warning {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
}

/* line 85, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_progress-bars.scss */
.progress-bar-danger {
  background-color: #CA7070;
}
/* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_progress-bar.scss */
.progress-striped .progress-bar-danger {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
}

/* line 1, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_media.scss */
.media {
  margin-top: 15px;
}
/* line 5, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_media.scss */
.media:first-child {
  margin-top: 0;
}

/* line 10, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_media.scss */
.media-right,
.media > .pull-right {
  padding-left: 10px;
}

/* line 15, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_media.scss */
.media-left,
.media > .pull-left {
  padding-right: 10px;
}

/* line 20, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_media.scss */
.media-left,
.media-right,
.media-body {
  display: table-cell;
  vertical-align: top;
}

/* line 27, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_media.scss */
.media-middle {
  vertical-align: middle;
}

/* line 31, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_media.scss */
.media-bottom {
  vertical-align: bottom;
}

/* line 36, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_media.scss */
.media-heading {
  margin-top: 0;
  margin-bottom: 5px;
}

/* line 44, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_media.scss */
.media-list {
  padding-left: 0;
  list-style: none;
}

/* line 10, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */
.list-group {
  margin-bottom: 20px;
  padding-left: 0;
}

/* line 21, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */
.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: transparent;
  border: 1px solid #ddd;
}
/* line 31, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */
.list-group-item:first-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
/* line 34, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* line 46, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */
a.list-group-item {
  color: #555;
}
/* line 49, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */
a.list-group-item .list-group-item-heading {
  color: #333;
}
/* line 54, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */
a.list-group-item:hover, a.list-group-item:focus {
  text-decoration: none;
  color: #555;
  background-color: #f5f5f5;
}

/* line 64, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */
.list-group-item.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus {
  background-color: #eeeeee;
  color: #999999;
  cursor: not-allowed;
}
/* line 72, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */
.list-group-item.disabled .list-group-item-heading, .list-group-item.disabled:hover .list-group-item-heading, .list-group-item.disabled:focus .list-group-item-heading {
  color: inherit;
}
/* line 75, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */
.list-group-item.disabled .list-group-item-text, .list-group-item.disabled:hover .list-group-item-text, .list-group-item.disabled:focus .list-group-item-text {
  color: #999999;
}
/* line 81, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
  z-index: 2;
  color: #fff;
  background-color: #1b92cb;
  border-color: #1b92cb;
}
/* line 90, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */
.list-group-item.active .list-group-item-heading,
.list-group-item.active .list-group-item-heading > small,
.list-group-item.active .list-group-item-heading > .small, .list-group-item.active:hover .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading > small,
.list-group-item.active:hover .list-group-item-heading > .small, .list-group-item.active:focus .list-group-item-heading,
.list-group-item.active:focus .list-group-item-heading > small,
.list-group-item.active:focus .list-group-item-heading > .small {
  color: inherit;
}
/* line 95, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */
.list-group-item.active .list-group-item-text, .list-group-item.active:hover .list-group-item-text, .list-group-item.active:focus .list-group-item-text {
  color: #bce3f6;
}

/* line 4, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
.list-group-item-success {
  color: #d4d9d9;
  background-color: #686868;
}

/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
a.list-group-item-success {
  color: #d4d9d9;
}
/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
a.list-group-item-success .list-group-item-heading {
  color: inherit;
}
/* line 18, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
a.list-group-item-success:hover, a.list-group-item-success:focus {
  color: #d4d9d9;
  background-color: #5b5b5b;
}
/* line 23, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
a.list-group-item-success.active, a.list-group-item-success.active:hover, a.list-group-item-success.active:focus {
  color: #fff;
  background-color: #d4d9d9;
  border-color: #d4d9d9;
}

/* line 4, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
.list-group-item-info {
  color: #8e8837;
  background-color: #e2df80;
}

/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
a.list-group-item-info {
  color: #8e8837;
}
/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
a.list-group-item-info .list-group-item-heading {
  color: inherit;
}
/* line 18, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
a.list-group-item-info:hover, a.list-group-item-info:focus {
  color: #8e8837;
  background-color: #ddda6b;
}
/* line 23, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
a.list-group-item-info.active, a.list-group-item-info.active:hover, a.list-group-item-info.active:focus {
  color: #fff;
  background-color: #8e8837;
  border-color: #8e8837;
}

/* line 4, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
.list-group-item-warning {
  color: #B59033;
  background-color: #F9F3C3;
}

/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
a.list-group-item-warning {
  color: #B59033;
}
/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
a.list-group-item-warning .list-group-item-heading {
  color: inherit;
}
/* line 18, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
a.list-group-item-warning:hover, a.list-group-item-warning:focus {
  color: #B59033;
  background-color: #f7eeac;
}
/* line 23, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
a.list-group-item-warning.active, a.list-group-item-warning.active:hover, a.list-group-item-warning.active:focus {
  color: #fff;
  background-color: #B59033;
  border-color: #B59033;
}

/* line 4, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
.list-group-item-danger {
  color: #ff434c;
  background-color: #febfc1;
}

/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
a.list-group-item-danger {
  color: #ff434c;
}
/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
a.list-group-item-danger .list-group-item-heading {
  color: inherit;
}
/* line 18, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
a.list-group-item-danger:hover, a.list-group-item-danger:focus {
  color: #ff434c;
  background-color: #fea6a9;
}
/* line 23, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */
a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-group-item-danger.active:focus {
  color: #fff;
  background-color: #ff434c;
  border-color: #ff434c;
}

/* line 117, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */
.list-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px;
}

/* line 121, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */
.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3;
}

/* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel {
  margin-bottom: 24px;
  border: 1px solid transparent;
  border-radius: 0;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

/* line 16, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-body {
  padding: 15px;
}
/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.panel-body:before, .panel-body:after {
  content: " ";
  display: table;
}
/* line 19, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.panel-body:after {
  clear: both;
}

/* line 22, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-right-radius: -1;
  border-top-left-radius: -1;
}
/* line 27, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-heading > .dropdown .dropdown-toggle {
  color: inherit;
}

/* line 33, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
  color: inherit;
}
/* line 39, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-title > a {
  color: inherit;
}

/* line 45, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-footer {
  padding: 10px 15px;
  background-color: transparent;
  border-top: 1px solid transparent;
  border-bottom-right-radius: -1;
  border-bottom-left-radius: -1;
}

/* line 59, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .list-group,
.panel > .panel-collapse > .list-group {
  margin-bottom: 0;
}
/* line 63, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .list-group .list-group-item,
.panel > .panel-collapse > .list-group .list-group-item {
  border-width: 1px 0;
  border-radius: 0;
}
/* line 70, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .list-group:first-child .list-group-item:first-child,
.panel > .panel-collapse > .list-group:first-child .list-group-item:first-child {
  border-top: 0;
  border-top-right-radius: -1;
  border-top-left-radius: -1;
}
/* line 77, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .list-group:last-child .list-group-item:last-child,
.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {
  border-bottom: 0;
  border-bottom-right-radius: -1;
  border-bottom-left-radius: -1;
}

/* line 86, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-heading + .list-group .list-group-item:first-child {
  border-top-width: 0;
}

/* line 90, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.list-group + .panel-footer {
  border-top-width: 0;
}

/* line 100, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .table,
.panel > .table-responsive > .table,
.panel > .panel-collapse > .table {
  margin-bottom: 0;
}
/* line 105, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .table caption,
.panel > .table-responsive > .table caption,
.panel > .panel-collapse > .table caption {
  padding-left: 15px;
  padding-right: 15px;
}
/* line 111, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .table:first-child,
.panel > .table-responsive:first-child > .table:first-child {
  border-top-right-radius: -1;
  border-top-left-radius: -1;
}
/* line 117, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .table:first-child > thead:first-child > tr:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child {
  border-top-left-radius: -1;
  border-top-right-radius: -1;
}
/* line 121, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
  border-top-left-radius: -1;
}
/* line 125, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
  border-top-right-radius: -1;
}
/* line 133, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .table:last-child,
.panel > .table-responsive:last-child > .table:last-child {
  border-bottom-right-radius: -1;
  border-bottom-left-radius: -1;
}
/* line 139, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child {
  border-bottom-left-radius: -1;
  border-bottom-right-radius: -1;
}
/* line 143, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
  border-bottom-left-radius: -1;
}
/* line 147, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
  border-bottom-right-radius: -1;
}
/* line 154, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .panel-body + .table,
.panel > .panel-body + .table-responsive,
.panel > .table + .panel-body,
.panel > .table-responsive + .panel-body {
  border-top: 1px solid #ddd;
}
/* line 160, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .table > tbody:first-child > tr:first-child th,
.panel > .table > tbody:first-child > tr:first-child td {
  border-top: 0;
}
/* line 164, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
  border: 0;
}
/* line 171, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .table-bordered > thead > tr > th:first-child,
.panel > .table-bordered > thead > tr > td:first-child,
.panel > .table-bordered > tbody > tr > th:first-child,
.panel > .table-bordered > tbody > tr > td:first-child,
.panel > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-bordered > tfoot > tr > td:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
  border-left: 0;
}
/* line 175, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .table-bordered > thead > tr > th:last-child,
.panel > .table-bordered > thead > tr > td:last-child,
.panel > .table-bordered > tbody > tr > th:last-child,
.panel > .table-bordered > tbody > tr > td:last-child,
.panel > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-bordered > tfoot > tr > td:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
  border-right: 0;
}
/* line 184, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .table-bordered > thead > tr:first-child > td,
.panel > .table-bordered > thead > tr:first-child > th,
.panel > .table-bordered > tbody > tr:first-child > td,
.panel > .table-bordered > tbody > tr:first-child > th,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
  border-bottom: 0;
}
/* line 193, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .table-bordered > tbody > tr:last-child > td,
.panel > .table-bordered > tbody > tr:last-child > th,
.panel > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-bordered > tfoot > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
  border-bottom: 0;
}
/* line 200, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel > .table-responsive {
  border: 0;
  margin-bottom: 0;
}

/* line 212, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-group {
  margin-bottom: 24px;
}
/* line 216, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-group .panel {
  margin-bottom: 0;
  border-radius: 0;
}
/* line 220, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-group .panel + .panel {
  margin-top: 5px;
}
/* line 225, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-group .panel-heading {
  border-bottom: 0;
}
/* line 228, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
  border-top: 1px solid transparent;
}
/* line 234, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-group .panel-footer {
  border-top: 0;
}
/* line 236, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-group .panel-footer + .panel-collapse .panel-body {
  border-bottom: 1px solid transparent;
}

/* line 244, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-default {
  border-color: transparent;
}
/* line 6, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-default > .panel-heading {
  color: #686868;
  background-color: none;
  border-color: transparent;
}
/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: transparent;
}
/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-default > .panel-heading .badge {
  color: none;
  background-color: #686868;
}
/* line 20, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-default > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: transparent;
}

/* line 247, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-primary {
  border-color: #1b92cb;
}
/* line 6, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-primary > .panel-heading {
  color: #fff;
  background-color: #1b92cb;
  border-color: #1b92cb;
}
/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #1b92cb;
}
/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-primary > .panel-heading .badge {
  color: #1b92cb;
  background-color: #fff;
}
/* line 20, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #1b92cb;
}

/* line 250, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-success {
  border-color: #d4d9d9;
}
/* line 6, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-success > .panel-heading {
  color: #d4d9d9;
  background-color: #686868;
  border-color: #d4d9d9;
}
/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-success > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #d4d9d9;
}
/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-success > .panel-heading .badge {
  color: #686868;
  background-color: #d4d9d9;
}
/* line 20, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-success > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #d4d9d9;
}

/* line 253, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-info {
  border-color: #c0b84d;
}
/* line 6, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-info > .panel-heading {
  color: #8e8837;
  background-color: #e2df80;
  border-color: #c0b84d;
}
/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-info > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #c0b84d;
}
/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-info > .panel-heading .badge {
  color: #e2df80;
  background-color: #8e8837;
}
/* line 20, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-info > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #c0b84d;
}

/* line 256, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */
.panel-warning {
  border-color: #B59033;
}
/* line 6, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-warning > .panel-heading {
  color: #B59033;
  background-color: #F9F3C3;
  border-color: #B59033;
}
/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-warning > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #B59033;
}
/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-warning > .panel-heading .badge {
  color: #F9F3C3;
  background-color: #B59033;
}
/* line 20, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */
.panel-warning > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #B59033;
}

/* line 5, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-embed.scss */
.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
/* line 12, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-embed.scss */
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border: 0;
}
/* line 27, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-embed.scss */
.embed-responsive.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
/* line 32, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-embed.scss */
.embed-responsive.embed-responsive-4by3 {
  padding-bottom: 75%;
}

/* line 6, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_close.scss */
.close {
  float: right;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}
/* line 15, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_close.scss */
.close:hover, .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

/* line 29, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_close.scss */
button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

/* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal-open {
  overflow: hidden;
}

/* line 16, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
/* line 32, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal.fade .modal-dialog, .modal.fade-enter .modal-dialog, .modal.fade-leave .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
/* line 36, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal.in .modal-dialog, .modal.fade-enter-active .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

/* line 38, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

/* line 44, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}

/* line 51, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal-content {
  position: relative;
  background-color: #ecefef;
  border: 1px solid #999;
  border: 1px solid #00776d;
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  outline: 0;
}

/* line 64, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-color: #243640;
}
/* line 71, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal-backdrop.fade, .modal-backdrop.fade-enter, .modal-backdrop.fade-leave {
  opacity: 0;
  filter: alpha(opacity=0);
}
/* line 72, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal-backdrop.in, .modal-backdrop.fade-enter-active {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

/* line 77, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e0e4e5;
  min-height: 16.5px;
}

/* line 83, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal-header .close {
  margin-top: -2px;
}

/* line 88, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal-title {
  margin: 0;
  line-height: 1.5;
}

/* line 95, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal-body {
  position: relative;
  padding: 30px;
}

/* line 101, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal-footer {
  padding: 30px;
  text-align: right;
  border-top: 1px solid #e0e4e5;
}
/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.modal-footer:before, .modal-footer:after {
  content: " ";
  display: table;
}
/* line 19, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.modal-footer:after {
  clear: both;
}
/* line 108, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal-footer .btn + .btn {
  margin-left: 5px;
  margin-bottom: 0;
}
/* line 113, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}
/* line 117, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}

/* line 123, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 768px) {
  /* line 134, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }

  /* line 138, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  }

  /* line 143, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
  .modal-sm {
    width: 300px;
  }
}
@media (min-width: 992px) {
  /* line 147, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */
  .modal-lg {
    width: 900px;
  }
}
/* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */
.tooltip {
  position: absolute;
  z-index: 1030;
  display: block;
  visibility: visible;
  font-family: "Source Sans Pro", "SourceSansPro", sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.4;
  opacity: 0;
  filter: alpha(opacity=0);
}
/* line 19, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */
.tooltip.in, .tooltip.fade-enter-active {
  opacity: 0.9;
  filter: alpha(opacity=90);
}
/* line 20, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */
.tooltip.top {
  margin-top: -3px;
  padding: 5px 0;
}
/* line 21, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */
.tooltip.right {
  margin-left: 3px;
  padding: 0 5px;
}
/* line 22, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */
.tooltip.bottom {
  margin-top: 3px;
  padding: 5px 0;
}
/* line 23, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */
.tooltip.left {
  margin-left: -3px;
  padding: 0 5px;
}

/* line 27, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #ecefef;
  text-align: center;
  text-decoration: none;
  background-color: #424242;
  border-radius: 4px;
}

/* line 38, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

/* line 47, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #424242;
}
/* line 54, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */
.tooltip.top-left .tooltip-arrow {
  bottom: 0;
  right: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #424242;
}
/* line 61, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  left: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #424242;
}
/* line 68, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #424242;
}
/* line 75, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #424242;
}
/* line 82, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #424242;
}
/* line 89, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  right: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #424242;
}
/* line 96, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  left: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #424242;
}

/* line 14, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
/* line 19, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */
.clearfix:after {
  clear: both;
}

/* line 12, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_utilities.scss */
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* line 15, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_utilities.scss */
.pull-right {
  float: right !important;
}

/* line 18, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_utilities.scss */
.pull-left {
  float: left !important;
}

/* line 27, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_utilities.scss */
.hide {
  display: none !important;
}

/* line 30, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_utilities.scss */
.show {
  display: block !important;
}

/* line 33, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_utilities.scss */
.invisible {
  visibility: hidden;
}

/* line 36, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_utilities.scss */
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

/* line 45, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_utilities.scss */
.hidden {
  display: none !important;
  visibility: hidden !important;
}

/* line 54, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_utilities.scss */
.affix {
  position: fixed;
}

@-ms-viewport {
  width: device-width;
}
/* line 18, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
.visible-xs, .visible-sm, .visible-md, .visible-lg {
  display: none !important;
}

/* line 31, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important;
}

@media (max-width: 767px) {
  /* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  .visible-xs {
    display: block !important;
  }

  /* line 10, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  table.visible-xs {
    display: table;
  }

  /* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  tr.visible-xs {
    display: table-row !important;
  }

  /* line 12, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
}
@media (max-width: 767px) {
  /* line 49, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
  .visible-xs-block {
    display: block !important;
  }
}

@media (max-width: 767px) {
  /* line 54, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
  .visible-xs-inline {
    display: inline !important;
  }
}

@media (max-width: 767px) {
  /* line 59, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
  .visible-xs-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  .visible-sm {
    display: block !important;
  }

  /* line 10, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  table.visible-sm {
    display: table;
  }

  /* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  tr.visible-sm {
    display: table-row !important;
  }

  /* line 12, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  /* line 68, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
  .visible-sm-block {
    display: block !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* line 73, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
  .visible-sm-inline {
    display: inline !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* line 78, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
  .visible-sm-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  /* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  .visible-md {
    display: block !important;
  }

  /* line 10, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  table.visible-md {
    display: table;
  }

  /* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  tr.visible-md {
    display: table-row !important;
  }

  /* line 12, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  /* line 87, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
  .visible-md-block {
    display: block !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  /* line 92, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
  .visible-md-inline {
    display: inline !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  /* line 97, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
  .visible-md-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 1200px) {
  /* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  .visible-lg {
    display: block !important;
  }

  /* line 10, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  table.visible-lg {
    display: table;
  }

  /* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  tr.visible-lg {
    display: table-row !important;
  }

  /* line 12, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  th.visible-lg,
  td.visible-lg {
    display: table-cell !important;
  }
}
@media (min-width: 1200px) {
  /* line 106, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
  .visible-lg-block {
    display: block !important;
  }
}

@media (min-width: 1200px) {
  /* line 111, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
  .visible-lg-inline {
    display: inline !important;
  }
}

@media (min-width: 1200px) {
  /* line 116, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
  .visible-lg-inline-block {
    display: inline-block !important;
  }
}

@media (max-width: 767px) {
  /* line 18, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  /* line 18, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  /* line 18, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  /* line 18, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  .hidden-lg {
    display: none !important;
  }
}
/* line 18, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
.visible-print {
  display: none !important;
}

@media print {
  /* line 7, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  .visible-print {
    display: block !important;
  }

  /* line 10, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  table.visible-print {
    display: table;
  }

  /* line 11, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  tr.visible-print {
    display: table-row !important;
  }

  /* line 12, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  th.visible-print,
  td.visible-print {
    display: table-cell !important;
  }
}
/* line 150, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
.visible-print-block {
  display: none !important;
}
@media print {
  /* line 150, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
  .visible-print-block {
    display: block !important;
  }
}

/* line 157, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
.visible-print-inline {
  display: none !important;
}
@media print {
  /* line 157, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
  .visible-print-inline {
    display: inline !important;
  }
}

/* line 164, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
.visible-print-inline-block {
  display: none !important;
}
@media print {
  /* line 164, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */
  .visible-print-inline-block {
    display: inline-block !important;
  }
}

@media print {
  /* line 18, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */
  .hidden-print {
    display: none !important;
  }
}
/*
 * clearfix     used project wide to clear floats and create a new formatting context
 * usage      @include clearfix-me(<empty|overflow|facebook|micro|stubborn>)
 * $clearfix-method sets default method
 */
/**
* @name         List
* @desc         Basic list with no bullets and no margins
* @author       
* @tested       
* @requires     
*/
/*
 * Define your own spacing classes for lists
 * 
 * @param $units - specific spacing units you want to use. Must go from small to large
 * e.g. @include ooListWhitespace((5px,10px,20px));
 *
 */
/**
* @desc         Create spacing classes and default spacing.
* @name         Whitespace
* @author       Fiona
* @tested       Safari, Chrome, Firefox, IE7-9
* @requires     _variables.scss
*/
/* ==========================================================================
   Default spacing
   ========================================================================== */
/* line 21, ../src/oocss/whitespace/_whitespace.scss */
table h1, table h2, table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl, table blockquote, table .media, table pre {
  margin-top: 0;
  margin-bottom: 0;
}

/* *
 * debug default spacing 
 * set $debug-spacing to true to visualize spacing and positioning
 */
/* ==========================================================================
   Spacing helpers
   ========================================================================== */
/**
 * Spacing helpers 
 * Should be used to modify the default spacing between objects (not between nodes of the same object)
 * Please use judiciously. You want to be using defaults most of the time, these are exceptions! 
 * <type><location><size>
 *
 * p,m 				padding,margin
 * a,t,r,b,l,h,v	all,top,right,bottom,left,horizontal,vertical
 * s,m,l,n 			small(5px),medium(10px),large(20px),none(0px)
 */
/*
 * Can define your own spacing units, or calculate the units based on how many spacing sizes you want
 * 
 * @param $units - specific spacing units you want to use. Must go from small to large
 * e.g. @include whitespace((5px,10px,20px));
 *
 * @param $sizes - how many sizes you want. Calculate sizes based on line-height
 * e.g. @include whitespace((), 4);
 *
 */
/*pending
---
title: No JavaScript
name: no_js
categories:
  - Utilities
  - All
---
### Javascript

Try disabling js and rendering this page.

```html_example
<h3 class="invisible-no-js">Won't show if browser doesn't support JS.</h3>
```

*/
/* line 20, ../src/pivotal-ui/components/utils.scss */
.no-js .invisible-no-js {
  visibility: hidden;
}

/* line 26, ../src/pivotal-ui/components/utils.scss */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

/*doc
---
title: Responsive Utilities
name: responsive_utilities
categories:
  - Utilities
  - All
---

Use a single or combination of the available classes for toggling content across viewport breakpoints.

<table class="styleguide">
  <thead>
    <tr>
      <th></th>
      <th>
        Extra small devices
        <small>Phones (&lt;768px)</small>
      </th>
      <th>
        Small devices
        <small>Tablets (&geq;768px)</small>
      </th>
      <th>
        Medium devices
        <small>Desktops (&geq;992px)</small>
      </th>
      <th>
        Large devices
        <small>Desktops (&geq;1200px)</small>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="no-wrap"><code>.visible-xs-*</code></th>
      <td class="is-visible">Visible</td>
      <td class="is-hidden">Hidden</td>
      <td class="is-hidden">Hidden</td>
      <td class="is-hidden">Hidden</td>
    </tr>
    <tr>
      <th class="no-wrap"><code>.visible-sm-*</code></th>
      <td class="is-hidden">Hidden</td>
      <td class="is-visible">Visible</td>
      <td class="is-hidden">Hidden</td>
      <td class="is-hidden">Hidden</td>
    </tr>
    <tr>
      <th class="no-wrap"><code>.visible-md-*</code></th>
      <td class="is-hidden">Hidden</td>
      <td class="is-hidden">Hidden</td>
      <td class="is-visible">Visible</td>
      <td class="is-hidden">Hidden</td>
    </tr>
    <tr>
      <th class="no-wrap"><code>.visible-lg-*</code></th>
      <td class="is-hidden">Hidden</td>
      <td class="is-hidden">Hidden</td>
      <td class="is-hidden">Hidden</td>
      <td class="is-visible">Visible</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th class="no-wrap"><code>.hidden-xs</code></th>
      <td class="is-hidden">Hidden</td>
      <td class="is-visible">Visible</td>
      <td class="is-visible">Visible</td>
      <td class="is-visible">Visible</td>
    </tr>
    <tr>
      <th class="no-wrap"><code>.hidden-sm</code></th>
      <td class="is-visible">Visible</td>
      <td class="is-hidden">Hidden</td>
      <td class="is-visible">Visible</td>
      <td class="is-visible">Visible</td>
    </tr>
    <tr>
      <th class="no-wrap"><code>.hidden-md</code></th>
      <td class="is-visible">Visible</td>
      <td class="is-visible">Visible</td>
      <td class="is-hidden">Hidden</td>
      <td class="is-visible">Visible</td>
    </tr>
    <tr>
      <th class="no-wrap"><code>.hidden-lg</code></th>
      <td class="is-visible">Visible</td>
      <td class="is-visible">Visible</td>
      <td class="is-visible">Visible</td>
      <td class="is-hidden">Hidden</td>
    </tr>
  </tbody>
</table>


The `.visible-*-*` classes for each breakpoint come in three variations, one for each CSS display property value listed below.

<table class="styleguide">
  <thead>
    <tr>
      <th>Group of classes</th>
      <th>CSS display</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="no-wrap"><code>.visible-*-block</code></td>
      <td class="no-wrap"><code>display: block;</code></td>
    </tr>
    <tr>
      <td class="no-wrap"><code>.visible-*-inline</code></td>
      <td class="no-wrap"><code>display: inline;</code></td>
    </tr>
    <tr>
      <td class="no-wrap"><code>.visible-*-inline-block</code></td>
      <td class="no-wrap"><code>display: inline-block;</code></td>
    </tr>
  </tbody>
</table>

So, for extra small (`xs`) screens for example, the available `.visible-*-*` classes are:

- `.visible-xs-block`
- `.visible-xs-inline`
- `.visible-xs-inline-block`

*/
/*doc
---
title: Print
name: print
categories:
  - Utilities
  - All
---

Similar to the regular responsive classes, use these for toggling content for print.

<table class="styleguide">
  <thead>
    <tr>
      <th>Classes</th>
      <th>Browser</th>
      <th>Print</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        <code>.visible-print-block</code><br>
        <code>.visible-print-inline</code><br>
        <code>.visible-print-inline-block</code>
      </th>
      <td class="is-hidden">Hidden</td>
      <td class="is-visible">Visible</td>
    </tr>
    <tr>
      <th><code>.hidden-print</code></th>
      <td class="is-visible">Visible</td>
      <td class="is-hidden">Hidden</td>
    </tr>
  </tbody>
</table>


*/
/*doc
---
title: Alignment
name: alignment
categories:
  - Utilities
  - All
---

The following classes can be used to for horizontal alignment.

```html_example_table
<p class="txt-l">
  <code>.txt-l</code>
</p>

<p class="txt-c">
  <code>.txt-c</code>
</p>

<p class="txt-r">
  <code>.txt-r</code>
</p>
```

On `display: inline` and `display: table-cell` elements,
the following classes can be used to for vertical alignment.

```html_example
<table class="table table-bordered">
  <tr>
    <td class="txt-t" width="20%">
      <code>.txt-t</code>
    </td>
    <td class="txt-m" width="20%">
      <code>.txt-m</code>
    </td>
    <td class="txt-b" width="20%">
      <code>.txt-b</code>
    </td>
    <td width="40%">
      Distillery trust fund Neutra fingerstache plaid messenger bag.
      Try-hard health goth PBR Helvetica hashtag. Try-hard narwhal letterpress,
      crucifix selfies trust fund swag mustache quinoa chambray iPhone.
    </td>
  </tr>
</table>
```

If you need to vertically align an element that does not fit into those display types,
take a look at [vertical alignment][vertical_align].

*/
/* line 253, ../src/pivotal-ui/components/utils.scss */
.txt-c, table .txt-c, table tr .txt-c, table tr td.txt-c {
  text-align: center;
}

/* line 257, ../src/pivotal-ui/components/utils.scss */
.txt-l, table .txt-l, table tr .txt-l, table tr td.txt-l {
  text-align: left;
}

/* line 261, ../src/pivotal-ui/components/utils.scss */
.txt-r, table .txt-r, table tr .txt-r, table tr td.txt-r {
  text-align: right;
}

/* line 265, ../src/pivotal-ui/components/utils.scss */
.txt-t, table .txt-t, table tr .txt-t, table tr td.txt-t, table tr th.txt-t {
  vertical-align: top;
}

/* line 269, ../src/pivotal-ui/components/utils.scss */
.txt-b, table .txt-b, table tr .txt-b, table tr td.txt-b, table tr th.txt-b {
  vertical-align: bottom;
}

/* line 273, ../src/pivotal-ui/components/utils.scss */
.txt-m, table .txt-m, table tr .txt-m, table tr td.txt-m, table tr th.txt-m {
  vertical-align: middle;
}

/*doc
---
title: Colors
name: color
categories:
  - Elements
  - Utilities
  - All
---

Our color pallet is composed of several different colors. At any given point in captures the current
evolution of our design and likely includes old and new colors. Whenever possible, evolve the old
colors rather than adding new ones.

<div class="alert alert-warning alert-dismissable">
  <h5 class="em-high mtn">
    Sass variables should only be used in variables.css.scss.
  </h5>
  <p>
    They should never be used directly when building components, because it makes
    it very hard to change the values later if you can't tell how they might have been used.
    You should <strong>define your own variables</strong> that use these colors in variables.css.scss.
  </p>
</div>

This example shows proper use of Sass variables.

```
$tabs-active-bg-color: $gray-2;
```

<div class="row row-gutter-sm mvxl">
  <div class="col-md-2">
    <div class="chip" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
      <div class="chip-color bg-neutral-1"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$gray-1</li>
          <li>.bg-neutral-1</li>
          <li>.type-neutral-1</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="col-md-2">
    <div class="chip">
      <div class="chip-color bg-neutral-2"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$gray-2</li>
          <li>.bg-neutral-2</li>
          <li>.type-neutral-2</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-2">
    <div class="chip">
      <div class="chip-color bg-neutral-3"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$gray-3</li>
          <li>.bg-neutral-3</li>
          <li>.type-neutral-3</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-2">
    <div class="chip">
      <div class="chip-color bg-neutral-4"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$gray-4</li>
          <li>.bg-neutral-4</li>
          <li>.type-neutral-4</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-2">
    <div class="chip">
      <div class="chip-color bg-neutral-5"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$gray-5</li>
          <li>.bg-neutral-5</li>
          <li>.type-neutral-5</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-2">
    <div class="chip">
      <div class="chip-color bg-neutral-6"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$gray-6</li>
          <li>.bg-neutral-6</li>
          <li>.type-neutral-6</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-2">
    <div class="chip">
      <div class="chip-color bg-neutral-7"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$gray-7</li>
          <li>.bg-neutral-7</li>
          <li>.type-neutral-7</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-2">
    <div class="chip">
      <div class="chip-color bg-neutral-8"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$gray-8</li>
          <li>.bg-neutral-8</li>
          <li>.type-neutral-8</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-2">
    <div class="chip">
      <div class="chip-color bg-neutral-9"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$gray-9</li>
          <li>.bg-neutral-9</li>
          <li>.type-neutral-9</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-2">
    <div class="chip">
      <div class="chip-color bg-neutral-10"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$gray-10</li>
          <li>.bg-neutral-10</li>
          <li>.type-neutral-10</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-2">
    <div class="chip">
      <div class="chip-color bg-neutral-11"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$gray-11</li>
          <li>.bg-neutral-11</li>
          <li>.type-neutral-11</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="row mvxl">
  <div class="col-md-3">
    <div class="chip">
      <div class="chip-color bg-dark-1"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$dark-1</li>
          <li>.bg-dark-1</li>
          <li>.type-dark-1</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="chip">
      <div class="chip-color bg-dark-2"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$dark-2</li>
          <li>.bg-dark-2</li>
          <li>.type-dark-2</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="chip">
      <div class="chip-color bg-dark-3"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$dark-3</li>
          <li>.bg-dark-3</li>
          <li>.type-dark-3</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="row mvxl">
  <div class="col-md-3">
    <div class="chip">
      <div class="chip-color bg-brand-1"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$brand-1</li>
          <li>.bg-brand-1</li>
          <li>.type-brand-1</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="chip">
      <div class="chip-color bg-brand-2"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$brand-2</li>
          <li>.bg-brand-2</li>
          <li>.type-brand-2</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="chip">
      <div class="chip-color bg-brand-3"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$brand-3</li>
          <li>.bg-brand-3</li>
          <li>.type-brand-3</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="chip">
      <div class="chip-color bg-brand-4"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$brand-4</li>
          <li>.bg-brand-4</li>
          <li>.type-brand-4</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="chip">
      <div class="chip-color bg-brand-5"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$brand-5</li>
          <li>.bg-brand-5</li>
          <li>.type-brand-5</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="row mvxl">
  <div class="col-md-3">
    <div class="chip">
      <div class="chip-color bg-accent-1"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$accent-5</li>
          <li>.bg-accent-5</li>
          <li>.type-accent-5</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="chip">
      <div class="chip-color bg-accent-2"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$accent-2</li>
          <li>.bg-accent-2</li>
          <li>.type-accent-2</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="chip">
      <div class="chip-color bg-accent-3"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$accent-3</li>
          <li>.bg-accent-3</li>
          <li>.type-accent-3</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="chip">
      <div class="chip-color bg-accent-4"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$accent-4</li>
          <li>.bg-accent-4</li>
          <li>.type-accent-4</li>
        </ul>
      </div>
    </div>
  </div>
   <div class="col-md-3">
    <div class="chip">
      <div class="chip-color bg-accent-5"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$accent-5</li>
          <li>.bg-accent-5</li>
          <li>.type-accent-5</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="row mvxl">
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bg-error-1"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$error-1</li>
          <li>.bg-error-1</li>
          <li>.type-error-1</li>
        </ul>
      </div>
    </div>
  </div>
   <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bg-error-2"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$error-2</li>
          <li>.bg-error-2</li>
          <li>.type-error-2</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bg-error-3"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$error-3</li>
          <li>.bg-error-3</li>
          <li>.type-error-3</li>
        </ul>
      </div>
    </div>
  </div>
   <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bg-error-4"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$error-4</li>
          <li>.bg-error-4</li>
          <li>.type-error-4</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="row mvxl">
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bg-warn-1"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$warn-1</li>
          <li>.bg-warn-1</li>
          <li>.type-warn-1</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bg-warn-2"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$warn-2</li>
          <li>.bg-warn-2</li>
          <li>.type-warn-2</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bg-warn-3"></div>
      <div class="chip-color-name">
        <ul class='list-unstyled'>
          <li>$warn-3</li>
          <li>.bg-warn-3</li>
          <li>.type-warn-3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="row mvxl">
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bg-success-1"></div>
      <div class="chip-color-name">$green-1</div>
    </div>
  </div>
   <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bg-success-2"></div>
      <div class="chip-color-name">$green-2</div>
    </div>
  </div>
</div>

*/
/* line 436, ../src/pivotal-ui/components/colors.scss */
.bg-neutral-1 {
  background-color: #282828 !important;
}

/* line 439, ../src/pivotal-ui/components/colors.scss */
.bg-neutral-2 {
  background-color: #424242 !important;
}

/* line 442, ../src/pivotal-ui/components/colors.scss */
.bg-neutral-3 {
  background-color: #686868 !important;
}

/* line 445, ../src/pivotal-ui/components/colors.scss */
.bg-neutral-4 {
  background-color: #8d8e8e !important;
}

/* line 448, ../src/pivotal-ui/components/colors.scss */
.bg-neutral-5 {
  background-color: #b4b4b4 !important;
}

/* line 451, ../src/pivotal-ui/components/colors.scss */
.bg-neutral-6 {
  background-color: #c3c5c7 !important;
}

/* line 454, ../src/pivotal-ui/components/colors.scss */
.bg-neutral-7 {
  background-color: #d4d9d9 !important;
}

/* line 457, ../src/pivotal-ui/components/colors.scss */
.bg-neutral-8 {
  background-color: #e0e4e5 !important;
}

/* line 460, ../src/pivotal-ui/components/colors.scss */
.bg-neutral-9 {
  background-color: #ecefef !important;
}

/* line 463, ../src/pivotal-ui/components/colors.scss */
.bg-neutral-10 {
  background-color: #F8F8F8 !important;
}

/* line 466, ../src/pivotal-ui/components/colors.scss */
.bg-neutral-11 {
  background-color: white !important;
}

/* line 471, ../src/pivotal-ui/components/colors.scss */
.bg-brand-1 {
  background-color: #025a53 !important;
}

/* line 475, ../src/pivotal-ui/components/colors.scss */
.bg-brand-2 {
  background-color: #00776d !important;
}

/* line 479, ../src/pivotal-ui/components/colors.scss */
.bg-brand-3 {
  background-color: #00a79d !important;
}

/* line 483, ../src/pivotal-ui/components/colors.scss */
.bg-brand-4 {
  background-color: #92d0c0 !important;
}

/* line 487, ../src/pivotal-ui/components/colors.scss */
.bg-brand-5 {
  background-color: #71ffda !important;
}

/* line 493, ../src/pivotal-ui/components/colors.scss */
.bg-accent-1 {
  background-color: #1a739e !important;
}

/* line 497, ../src/pivotal-ui/components/colors.scss */
.bg-accent-2 {
  background-color: #2185c5 !important;
}

/* line 501, ../src/pivotal-ui/components/colors.scss */
.bg-accent-3 {
  background-color: #49a8d5 !important;
}

/* line 505, ../src/pivotal-ui/components/colors.scss */
.bg-accent-4 {
  background-color: #a7c9e0 !important;
}

/* line 509, ../src/pivotal-ui/components/colors.scss */
.bg-accent-5 {
  background-color: #c3f4ff !important;
}

/* line 515, ../src/pivotal-ui/components/colors.scss */
.bg-dark-1 {
  background-color: #243640 !important;
}

/* line 519, ../src/pivotal-ui/components/colors.scss */
.bg-dark-2 {
  background-color: #3f484f !important;
}

/* line 523, ../src/pivotal-ui/components/colors.scss */
.bg-dark-3 {
  background-color: #525c63 !important;
}

/* line 528, ../src/pivotal-ui/components/colors.scss */
.bg-error-1 {
  background-color: #b31612 !important;
}

/* line 532, ../src/pivotal-ui/components/colors.scss */
.bg-error-2 {
  background-color: #eb3d46 !important;
}

/* line 536, ../src/pivotal-ui/components/colors.scss */
.bg-error-3 {
  background-color: #ff434c !important;
}

/* line 540, ../src/pivotal-ui/components/colors.scss */
.bg-error-4 {
  background-color: #febfc1 !important;
}

/* line 545, ../src/pivotal-ui/components/colors.scss */
.bg-warn-1 {
  background-color: #B59033 !important;
}

/* line 549, ../src/pivotal-ui/components/colors.scss */
.bg-warn-2 {
  background-color: #F1C148 !important;
}

/* line 553, ../src/pivotal-ui/components/colors.scss */
.bg-warn-3 {
  background-color: #F9F3C3 !important;
}

/* line 558, ../src/pivotal-ui/components/colors.scss */
.bg-success-1 {
  background-color: #165450 !important;
}

/* line 562, ../src/pivotal-ui/components/colors.scss */
.bg-success-2 {
  background-color: #AFD79B !important;
}

/*doc
---
title: Shadows & Glows
name: color_shadows_glows
parent: color
---
<div class="row">
<div class="contrast-bar">
  <div class="row mvxl">
    <div class="col-md-2">
      <div class="chip">
        <div class="chip-color bg-shadow-1"></div>
        <div class="chip-color-name">$shadow-1</div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="chip">
        <div class="chip-color bg-shadow-2"></div>
        <div class="chip-color-name">$shadow-2</div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="chip">
        <div class="chip-color bg-shadow-3"></div>
        <div class="chip-color-name">$shadow-3</div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="chip">
        <div class="chip-color bg-shadow-4"></div>
        <div class="chip-color-name">$shadow-4</div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="chip">
        <div class="chip-color bg-glow-1"></div>
        <div class="chip-color-name">$glow-1</div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="chip">
        <div class="chip-color bg-glow-2"></div>
        <div class="chip-color-name">$glow-2</div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="chip">
        <div class="chip-color bg-glow-3"></div>
        <div class="chip-color-name">$glow-3</div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="chip">
        <div class="chip-color bg-glow-4"></div>
        <div class="chip-color-name">$glow-4</div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="chip">
        <div class="chip-color bg-glow-5"></div>
        <div class="chip-color-name">$glow-5</div>
      </div>
    </div>
  </div>
</div>
</div>
*/
/* line 637, ../src/pivotal-ui/components/colors.scss */
.bg-glow-1 {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* line 641, ../src/pivotal-ui/components/colors.scss */
.bg-glow-2 {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* line 645, ../src/pivotal-ui/components/colors.scss */
.bg-glow-3 {
  background-color: rgba(255, 255, 255, 0.4) !important;
}

/* line 649, ../src/pivotal-ui/components/colors.scss */
.bg-glow-4 {
  background-color: rgba(255, 255, 255, 0.6) !important;
}

/* line 653, ../src/pivotal-ui/components/colors.scss */
.bg-glow-5 {
  background-color: white !important;
}

/* line 657, ../src/pivotal-ui/components/colors.scss */
.bg-shadow-1 {
  background-color: rgba(0, 0, 0, 0.3) !important;
}

/* line 661, ../src/pivotal-ui/components/colors.scss */
.bg-shadow-2 {
  background-color: rgba(0, 0, 0, 0.14) !important;
}

/* line 665, ../src/pivotal-ui/components/colors.scss */
.bg-shadow-3 {
  background-color: rgba(0, 0, 0, 0.07) !important;
}

/* line 669, ../src/pivotal-ui/components/colors.scss */
.bg-shadow-4 {
  background-color: rgba(0, 0, 0, 0.035) !important;
}

/*doc
---
title: Backgrounds
name: background
categories:
  - Elements
  - All
---

Background color classes can be applied to any element. See [colors][color] for a list of background classes.

*/
/*doc
---
title: Overlays
name: background_overlays
parent: background
---

<div class="row">
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bg-cloud"></div>
      <div class="chip-color-name">.bg-cloud</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bg-glow"></div>
      <div class="chip-color-name">.bg-glow</div>
    </div>
  </div>
</div>

*/
/* line 38, ../src/pivotal-ui/components/backgrounds.scss */
.bg-cloud {
  background: #F8F8F8 image-url("images/gray-cloud.png") no-repeat 50% 50%;
}

/* line 42, ../src/pivotal-ui/components/backgrounds.scss */
.bg-glow {
  background: radial-gradient(ellipse at 50% bottom, #4b6475 0%, #243640 60%);
}

/*doc
---
title: Full Bleed
name: background_full_bleed
parent: background
---

This example uses an about us hero image by default, but you can change it to any image you would like.
Keep in mind, blurry, treated images will look better when stretched to fit a particular content area.

```html_example
<div class='pane bg-full-bleed'>
  <div class='container'>
    <h1 class='type-neutral-11 txt-c'>Full bleed background image</h1>
  </div>
</div>
  ```
To modify this component to use a custom image, use an inline `background-image` style like so:

```html_example
<div class='pane bg-full-bleed' style="background-image: url(images/such-awesome.jpg)">
  <div class='container'>
    <h1 class='type-neutral-11 txt-c'>Full bleed background image</h1>
  </div>
</div>
```
*/
/* line 75, ../src/pivotal-ui/components/backgrounds.scss */
.bg-full-bleed {
  background-image: image-url("images/aboutus-hero.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/*doc
---
title: Whitespace
name: whitespace
categories:
  - Utilities
  - All
---

*/
/*doc
---
title: Standard
name: standard
parent: whitespace
---

Should be used to modify the default spacing between objects (not between nodes of the same object)
Please use judiciously. You want to be using defaults most of the time, these are exceptions!
`<type><location><size>`

Letter                           | Description
-------------------------------- | ------------------------------------------------------------------
p, m                             | padding, margin
a, t, r, b, l, h, v              | all, top, right, bottom, left, horizontal, vertical
n, s, m, l, xl, xxl, xxxl, xxxxl | none(0px), small(5px), medium(7px), large(10px), extra large(20px), extra extra large (40px), extra extra extra large (120px), extra extra extra extra large (140px)


```html_example
<p>A normal paragraph</p>
<p class="pal">A paragraph with large padding</p>
```

*/
/*doc
---
title: List
name: whitespace_list
parent: whitespace
---

See [list spacing][list_whitespace].

*/
/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pan {
  padding: 0 !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.man {
  margin: 0 !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pvn {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mvn {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.phn {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mhn {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.ptn {
  padding-top: 0 !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mtn {
  margin-top: 0 !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.prn {
  padding-right: 0 !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mrn {
  margin-right: 0 !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pbn {
  padding-bottom: 0 !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mbn {
  margin-bottom: 0 !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pln {
  padding-left: 0 !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mln {
  margin-left: 0 !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pas {
  padding: 5px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mas {
  margin: 5px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pvs {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mvs {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.phs {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mhs {
  margin-left: 5px !important;
  margin-right: 5px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pts {
  padding-top: 5px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mts {
  margin-top: 5px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.prs {
  padding-right: 5px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mrs {
  margin-right: 5px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pbs {
  padding-bottom: 5px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mbs {
  margin-bottom: 5px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pls {
  padding-left: 5px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mls {
  margin-left: 5px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pam {
  padding: 7px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mam {
  margin: 7px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pvm {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mvm {
  margin-top: 7px !important;
  margin-bottom: 7px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.phm {
  padding-left: 7px !important;
  padding-right: 7px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mhm {
  margin-left: 7px !important;
  margin-right: 7px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.ptm {
  padding-top: 7px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mtm {
  margin-top: 7px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.prm {
  padding-right: 7px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mrm, .traffic-lights i {
  margin-right: 7px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pbm {
  padding-bottom: 7px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mbm {
  margin-bottom: 7px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.plm {
  padding-left: 7px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mlm {
  margin-left: 7px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pal {
  padding: 10px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mal {
  margin: 10px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pvl {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mvl {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.phl {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mhl {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.ptl {
  padding-top: 10px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mtl {
  margin-top: 10px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.prl {
  padding-right: 10px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mrl {
  margin-right: 10px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pbl {
  padding-bottom: 10px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mbl {
  margin-bottom: 10px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pll {
  padding-left: 10px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mll {
  margin-left: 10px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.paxl {
  padding: 20px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.maxl {
  margin: 20px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pvxl {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mvxl {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.phxl {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mhxl {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.ptxl {
  padding-top: 20px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mtxl {
  margin-top: 20px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.prxl {
  padding-right: 20px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mrxl {
  margin-right: 20px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pbxl {
  padding-bottom: 20px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mbxl {
  margin-bottom: 20px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.plxl {
  padding-left: 20px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mlxl {
  margin-left: 20px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.paxxl {
  padding: 40px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.maxxl {
  margin: 40px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pvxxl {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mvxxl {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.phxxl {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mhxxl {
  margin-left: 40px !important;
  margin-right: 40px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.ptxxl {
  padding-top: 40px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mtxxl {
  margin-top: 40px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.prxxl {
  padding-right: 40px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mrxxl {
  margin-right: 40px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pbxxl {
  padding-bottom: 40px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mbxxl {
  margin-bottom: 40px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.plxxl {
  padding-left: 40px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mlxxl {
  margin-left: 40px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.paxxxl {
  padding: 120px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.maxxxl {
  margin: 120px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pvxxxl {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mvxxxl {
  margin-top: 120px !important;
  margin-bottom: 120px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.phxxxl {
  padding-left: 120px !important;
  padding-right: 120px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mhxxxl {
  margin-left: 120px !important;
  margin-right: 120px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.ptxxxl {
  padding-top: 120px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mtxxxl {
  margin-top: 120px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.prxxxl {
  padding-right: 120px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mrxxxl {
  margin-right: 120px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pbxxxl {
  padding-bottom: 120px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mbxxxl {
  margin-bottom: 120px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.plxxxl {
  padding-left: 120px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mlxxxl {
  margin-left: 120px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.paxxxxl {
  padding: 140px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.maxxxxl {
  margin: 140px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pvxxxxl {
  padding-top: 140px !important;
  padding-bottom: 140px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mvxxxxl {
  margin-top: 140px !important;
  margin-bottom: 140px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.phxxxxl {
  padding-left: 140px !important;
  padding-right: 140px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mhxxxxl {
  margin-left: 140px !important;
  margin-right: 140px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.ptxxxxl {
  padding-top: 140px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mtxxxxl {
  margin-top: 140px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.prxxxxl {
  padding-right: 140px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mrxxxxl {
  margin-right: 140px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.pbxxxxl {
  padding-bottom: 140px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mbxxxxl {
  margin-bottom: 140px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.plxxxxl {
  padding-left: 140px !important;
}

/* line 113, ../src/oocss/whitespace/_whitespace.scss */
.mlxxxxl {
  margin-left: 140px !important;
}

@media all and (max-width: 768px) {
  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pan {
    padding: 0 !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .man {
    margin: 0 !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pvn {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mvn {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .phn {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mhn {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .ptn {
    padding-top: 0 !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mtn {
    margin-top: 0 !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .prn {
    padding-right: 0 !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mrn {
    margin-right: 0 !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pbn {
    padding-bottom: 0 !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mbn {
    margin-bottom: 0 !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pln {
    padding-left: 0 !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mln {
    margin-left: 0 !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pas {
    padding: 5px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mas {
    margin: 5px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pvs {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mvs {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .phs {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mhs {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pts {
    padding-top: 5px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mts {
    margin-top: 5px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .prs {
    padding-right: 5px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mrs {
    margin-right: 5px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pbs {
    padding-bottom: 5px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mbs {
    margin-bottom: 5px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pls {
    padding-left: 5px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mls {
    margin-left: 5px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pam {
    padding: 7px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mam {
    margin: 7px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pvm {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mvm {
    margin-top: 7px !important;
    margin-bottom: 7px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .phm {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mhm {
    margin-left: 7px !important;
    margin-right: 7px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .ptm {
    padding-top: 7px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mtm {
    margin-top: 7px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .prm {
    padding-right: 7px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mrm, .traffic-lights i {
    margin-right: 7px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pbm {
    padding-bottom: 7px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mbm {
    margin-bottom: 7px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .plm {
    padding-left: 7px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mlm {
    margin-left: 7px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pal {
    padding: 10px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mal {
    margin: 10px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pvl {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mvl {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .phl {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mhl {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .ptl {
    padding-top: 10px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mtl {
    margin-top: 10px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .prl {
    padding-right: 10px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mrl {
    margin-right: 10px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pbl {
    padding-bottom: 10px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mbl {
    margin-bottom: 10px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pll {
    padding-left: 10px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mll {
    margin-left: 10px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .paxl {
    padding: 15px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .maxl {
    margin: 15px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pvxl {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mvxl {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .phxl {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mhxl {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .ptxl {
    padding-top: 15px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mtxl {
    margin-top: 15px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .prxl {
    padding-right: 15px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mrxl {
    margin-right: 15px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pbxl {
    padding-bottom: 15px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mbxl {
    margin-bottom: 15px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .plxl {
    padding-left: 15px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mlxl {
    margin-left: 15px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .paxxl {
    padding: 20px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .maxxl {
    margin: 20px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pvxxl {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mvxxl {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .phxxl {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mhxxl {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .ptxxl {
    padding-top: 20px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mtxxl {
    margin-top: 20px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .prxxl {
    padding-right: 20px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mrxxl {
    margin-right: 20px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pbxxl {
    padding-bottom: 20px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mbxxl {
    margin-bottom: 20px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .plxxl {
    padding-left: 20px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mlxxl {
    margin-left: 20px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .paxxxl {
    padding: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .maxxxl {
    margin: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pvxxxl {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mvxxxl {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .phxxxl {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mhxxxl {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .ptxxxl {
    padding-top: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mtxxxl {
    margin-top: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .prxxxl {
    padding-right: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mrxxxl {
    margin-right: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pbxxxl {
    padding-bottom: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mbxxxl {
    margin-bottom: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .plxxxl {
    padding-left: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mlxxxl {
    margin-left: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .paxxxxl {
    padding: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .maxxxxl {
    margin: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pvxxxxl {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mvxxxxl {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .phxxxxl {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mhxxxxl {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .ptxxxxl {
    padding-top: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mtxxxxl {
    margin-top: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .prxxxxl {
    padding-right: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mrxxxxl {
    margin-right: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .pbxxxxl {
    padding-bottom: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mbxxxxl {
    margin-bottom: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .plxxxxl {
    padding-left: 30px !important;
  }

  /* line 113, ../src/oocss/whitespace/_whitespace.scss */
  .mlxxxxl {
    margin-left: 30px !important;
  }
}
/*doc
---
title: List Spacing
name: list_whitespace
parent: list
---

Most lists come with built in default spacing that should work for you. However, if you find yourself needing to modify the spacing, you should do that with list spacing classes rather than whitespace classes. A single class can be applied to the list and all direct children will be modified.
The classes are constructed by specifying `<type><location><size>`.



<table class="styleguide">
  <tbody>
    <tr>
      <th scope="col" colspan="3" class="txtL"><strong>Type:</strong></th>
    </tr>
    <tr>
      <th scope="row"><code class="sg-code">l</code></th>
      <td>list</td>
      <td>Space on the inside of each of the li direct children of the element</td>
    </tr>
    <tr>
      <th scope="col" colspan="3" class="txtL"><strong>Location:</strong></th>
    </tr>
    <tr>
      <th scope="row"><code class="sg-code">h</code></th>
      <td>horizontal</td>
      <td>Adds spacing to the left and right of the <code class="sg-code">li</code>.</td>
    </tr>
    <tr>
      <th scope="row"><code class="sg-code">v</code></th>
      <td>vertical</td>
      <td>Adds spacing to the top and bottom of the <code class="sg-code">li</code>.</td>
    </tr>
    <tr>
      <th scope="col" colspan="3" class="txtL"><strong>Size:</strong></th>
    </tr>
    <tr>
      <th scope="row"><code class="sg-code">xl</code></th>
      <td>extra large</td>
      <td>Adds 21 pixels of space</td>
    </tr>
    <tr>
      <th scope="row"><code class="sg-code">l</code></th>
      <td>large</td>
      <td>Adds 10 pixels of space</td>
    </tr>
    <tr>
      <th scope="row"><code class="sg-code">m</code></th>
      <td>medium</td>
      <td>Adds 7 pixels of space</td>
    </tr>
    <tr>
      <th scope="row"><code class="sg-code">s</code></th>
      <td>small</td>
      <td>Adds 5 pixels of space</td>
    </tr>
    <tr>
      <th scope="row"><code class="sg-code">n</code></th>
      <td>none</td>
      <td>Sets any existing space to 0</td>
    </tr>
  </tbody>
</table>

### Vertical Spacing Options (`n` -> `xl`)

```html_example_table
<ul class="lvn">
  <li>feep</li>
  <li>fop</li>
  <li>meep</li>
</ul>

<ul class="lvs">
  <li>feep</li>
  <li>fop</li>
  <li>meep</li>
</ul>

<ul class="lvm">
  <li>feep</li>
  <li>fop</li>
  <li>meep</li>
</ul>

<ul class="lvl">
  <li>feep</li>
  <li>fop</li>
  <li>meep</li>
</ul>

<ul class="lvxl">
  <li>feep</li>
  <li>fop</li>
  <li>meep</li>
</ul>
```

### Horizontal Spacing Options (`n` -> `xl`)


```html_example_table
<ul class="list-inline lhn">
  <li>feep</li>
  <li>fop</li>
  <li>meep</li>
</ul>

<ul class="list-inline lhs">
  <li>feep</li>
  <li>fop</li>
  <li>meep</li>
</ul>

<ul class="list-inline lhm">
  <li>feep</li>
  <li>fop</li>
  <li>meep</li>
</ul>

<ul class="list-inline lhl">
  <li>feep</li>
  <li>fop</li>
  <li>meep</li>
</ul>

<ul class="list-inline lhxl">
  <li>feep</li>
  <li>fop</li>
  <li>meep</li>
</ul>
```

*/
/*doc
---
title: Typography
name: type
categories:
  - Elements
  - All
---

Source Sans Pro is our font family.
It can be used with the following modifiers to achieve a variety of effects.
*/
/* line 14, ../src/pivotal-ui/components/typography.scss */
* {
  -webkit-font-smoothing: antialiased;
}

/*doc
---
title: Alignment
name: type_alignment
parent: type
---

See the [alignment component][alignment] for classes to use for text alignment.

*/
/*doc
---
title: Sizes
name: 1_type_sizes
parent: type
---

Set font sizes using headings and modifier classes.

```html_example_table
<h1 class="title">h1.title 42px</h1>

<h1>h1 31px</h1>

<h2>h2 25px</h2>

<h3>h3 20px</h3>

<h4>h4 18px</h4>

<h5>h5 16px</h5>

<h6>h6 13px</h6>

<p>base font size 16px</p>

<p class="type-sm">small text 14px</p>

<p class="type-xs">extra small text 12px</p>
```

<div class="alert alert-info mbxl">
  <h5 class="em-high mtn">
    Separating code and visual semantics
  </h5>
  <p>
    Sometimes you may need to use a heading which has different visual and code semantics.
    You can accomplish this by combining classes with elements
    (classes take visual precedence over elements in this case).
  </p>
</div>



```html_example_table
  <h1 class="h2">I am a h1!</h1>

  <h2 class="h1">I am a h2!</h2>
```

If it's not a heading but you need similar visual treatment you can add just the class to any element.

<div class="alert alert-warning mbxl">
  <p class="em-high">
    Use headings when possible since they add semantic value.
  </p>
</div>

```html_example_table
  <div class="h2">Heading level 2 on a div</div>
```

*/
/* line 96, ../src/pivotal-ui/components/typography.scss */
h1, .h1, .form-contenteditable input.form-control, h2, .h2, h3, .h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

/* line 101, ../src/pivotal-ui/components/typography.scss */
h4, .h4, h5, .h5, h6, .h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}

@media all and (max-width: 768px) {
  /* line 107, ../src/pivotal-ui/components/typography.scss */
  h1, .h1, .form-contenteditable input.form-control, h2, .h2, h3, .h3 {
    margin-top: 15px;
    margin-bottom: 10px;
  }

  /* line 112, ../src/pivotal-ui/components/typography.scss */
  h4, .h4, h5, .h5, h6, .h6 {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
/* line 120, ../src/pivotal-ui/components/typography.scss */
h1, .h1, .form-contenteditable input.form-control {
  font-weight: 400;
}

/* line 124, ../src/pivotal-ui/components/typography.scss */
h2, .h2 {
  font-weight: 400;
}

/* line 128, ../src/pivotal-ui/components/typography.scss */
h3, .h3 {
  font-weight: 400;
}

/* line 132, ../src/pivotal-ui/components/typography.scss */
h4, .h4 {
  font-weight: 400;
}

/* line 136, ../src/pivotal-ui/components/typography.scss */
h5, .h5 {
  font-weight: 400;
}

/* line 140, ../src/pivotal-ui/components/typography.scss */
h6, .h6 {
  font-weight: 400;
}

/* line 144, ../src/pivotal-ui/components/typography.scss */
small,
.type-sm {
  font-size: 14px;
}

/* line 147, ../src/pivotal-ui/components/typography.scss */
.type-xs,
.type-terms {
  font-size: 12px;
}

/* line 150, ../src/pivotal-ui/components/typography.scss */
.title {
  font-size: 42px;
}

/*doc
---
title: Emphasis Modifiers
name: type_modifiers
parent: type
---

Type emphasis modifiers can be used on any type element.

```html_example_table
<h1 class="em-high">Really Important</h1>
<p>
  I mean <span class="em-max">reeeeeeeeeeeally</span>
</p>
```

Here's a table of all the emphasis modifier classes.

```html_example_table
<h1 class="em-low">Low emphasis</h1>

<h1 class="em-default">Default emphasis</h1>

<h1 class="em-high">High emphasis</h1>

<h1 class="em-max">Maximum emphasis</h1>

<h1 class="em-alt">Emphasis alternate</h1>
```

*/
/* line 186, ../src/pivotal-ui/components/typography.scss */
.em-low {
  font-weight: 200 !important;
}

/* line 187, ../src/pivotal-ui/components/typography.scss */
.em-default {
  font-weight: 400 !important;
}

/* line 188, ../src/pivotal-ui/components/typography.scss */
.em-high {
  font-weight: 600 !important;
}

/* line 189, ../src/pivotal-ui/components/typography.scss */
.em-max {
  font-weight: 900 !important;
}

/* line 190, ../src/pivotal-ui/components/typography.scss */
.em-alt {
  text-transform: uppercase !important;
}

/*doc
---
title: Colors
name: type_colors
parent: type
---

You can apply color to any text with the color classes.

```html_example_table
<p class="type-brand-3">I'm a brand color!</p>
```

Here's a table of all the color classes.

<table class="styleguide">
  <tr>
    <td class="bg-neutral-11"> <p class="type-inverse">Type inverse</p> </td>
    <td class="bg-dark-1"> <p class="type-inverse">Type inverse</p> </td>
    <td> <code>.type-inverse</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-1">Type neutral 1</p> </td>
    <td class="bg-dark-1"> <p class="type-neutral-1">Type neutral 1</p> </td>
    <td> <code>.type-neutral-1</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-1">Type neutral 1</p> </td>
    <td class="bg-dark-1"> <p class="type-neutral-1">Type neutral 1</p> </td>
    <td> <code>.type-neutral-1</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-2">Type neutral 2</p> </td>
    <td class="bg-dark-1"> <p class="type-neutral-2">Type neutral 2</p> </td>
    <td> <code>.type-neutral-2</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-3">Type neutral 3</p> </td>
    <td class="bg-dark-1"> <p class="type-neutral-3">Type neutral 3</p> </td>
    <td> <code>.type-neutral-3</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-4">Type neutral 4</p> </td>
    <td class="bg-dark-1"> <p class="type-neutral-4">Type neutral 4</p> </td>
    <td> <code>.type-neutral-4</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-5">Type neutral 5</p> </td>
    <td class="bg-dark-1"> <p class="type-neutral-5">Type neutral 5</p> </td>
    <td> <code>.type-neutral-5</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-6">Type neutral 6</p> </td>
    <td class="bg-dark-1"> <p class="type-neutral-6">Type neutral 6</p> </td>
    <td> <code>.type-neutral-6</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-7">Type neutral 7</p> </td>
    <td class="bg-dark-1"> <p class="type-neutral-7">Type neutral 7</p> </td>
    <td> <code>.type-neutral-7</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-8">Type neutral 8</p> </td>
    <td class="bg-dark-1"> <p class="type-neutral-8">Type neutral 8</p> </td>
    <td> <code>.type-neutral-8</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-9">Type neutral 9</p> </td>
    <td class="bg-dark-1"> <p class="type-neutral-9">Type neutral 9</p> </td>
    <td> <code>.type-neutral-9</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-10">Type neutral 10</p> </td>
    <td class="bg-dark-1"> <p class="type-neutral-10">Type neutral 10</p> </td>
    <td> <code>.type-neutral-10</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-11">Type neutral 11</p> </td>
    <td class="bg-dark-1"> <p class="type-neutral-11">Type neutral 11</p> </td>
    <td> <code>.type-neutral-11</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-dark-1">Type dark 1</p> </td>
    <td class="bg-dark-1"> <p class="type-dark-1">Type dark 1</p> </td>
    <td> <code>.type-dark-1</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-dark-2">Type dark 2</p> </td>
    <td class="bg-dark-1"> <p class="type-dark-2">Type dark 2</p> </td>
    <td> <code>.type-dark-2</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-dark-3">Type dark 3</p> </td>
    <td class="bg-dark-1"> <p class="type-dark-3">Type dark 3</p> </td>
    <td> <code>.type-dark-3</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-accent-1">Type accent 1</p> </td>
    <td class="bg-dark-1"> <p class="type-accent-1">Type accent 1</p> </td>
    <td> <code>.type-accent-1</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-accent-2">Type accent 2</p> </td>
    <td class="bg-dark-1"> <p class="type-accent-2">Type accent 2</p> </td>
    <td> <code>.type-accent-2</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-accent-3">Type accent 3</p> </td>
    <td class="bg-dark-1"> <p class="type-accent-3">Type accent 3</p> </td>
    <td> <code>.type-accent-3</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-accent-4">Type accent 4</p> </td>
    <td class="bg-dark-1"> <p class="type-accent-4">Type accent 4</p> </td>
    <td> <code>.type-accent-4</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-accent-5">Type accent 5</p> </td>
    <td class="bg-dark-1"> <p class="type-accent-5">Type accent 5</p> </td>
    <td> <code>.type-accent-5</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-brand-1">Type brand 1</p> </td>
    <td class="bg-dark-1"> <p class="type-brand-1">Type brand 1</p> </td>
    <td> <code>.type-brand-1</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-brand-2">Type brand 2</p> </td>
    <td class="bg-dark-1"> <p class="type-brand-2">Type brand 2</p> </td>
    <td> <code>.type-brand-2</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-brand-3">Type brand 3</p> </td>
    <td class="bg-dark-1"> <p class="type-brand-3">Type brand 3</p> </td>
    <td> <code>.type-brand-3</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-brand-4">Type brand 4</p> </td>
    <td class="bg-dark-1"> <p class="type-brand-4">Type brand 4</p> </td>
    <td> <code>.type-brand-4</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-brand-5">Type brand 5</p> </td>
    <td class="bg-dark-1"> <p class="type-brand-5">Type brand 5</p> </td>
    <td> <code>.type-brand-5</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-error-1">Type error 1</p> </td>
    <td class="bg-dark-1"> <p class="type-error-1">Type error 1</p> </td>
    <td> <code>.type-error-1</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-error-2">Type error 2</p> </td>
    <td class="bg-dark-1"> <p class="type-error-2">Type error 2</p> </td>
    <td> <code>.type-error-2</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-error-3">Type error 3</p> </td>
    <td class="bg-dark-1"> <p class="type-error-3">Type error 3</p> </td>
    <td> <code>.type-error-3</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-error-4">Type error 4</p> </td>
    <td class="bg-dark-1"> <p class="type-error-4">Type error 4</p> </td>
    <td> <code>.type-error-4</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-success-1">Type success 1</p> </td>
    <td class="bg-dark-1"> <p class="type-success-1">Type success 1</p> </td>
    <td> <code>.type-success-1</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-success-2">Type success 2</p> </td>
    <td class="bg-dark-1"> <p class="type-success-2">Type success 2</p> </td>
    <td> <code>.type-success-2</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-warn-1">Type warn 1</p> </td>
    <td class="bg-dark-1"> <p class="type-warn-1">Type warn 1</p> </td>
    <td> <code>.type-warn-1</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-warn-2">Type warn 2</p> </td>
    <td class="bg-dark-1"> <p class="type-warn-2">Type warn 2</p> </td>
    <td> <code>.type-warn-2</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-warn-3">Type warn 3</p> </td>
    <td class="bg-dark-1"> <p class="type-warn-3">Type warn 3</p> </td>
    <td> <code>.type-warn-3</code> </td>
  </tr>
</table>

*/
/* line 389, ../src/pivotal-ui/components/typography.scss */
.type-neutral-1 {
  color: #282828 !important;
}

/* line 390, ../src/pivotal-ui/components/typography.scss */
.type-neutral-2 {
  color: #424242 !important;
}

/* line 391, ../src/pivotal-ui/components/typography.scss */
.type-neutral-3 {
  color: #686868 !important;
}

/* line 392, ../src/pivotal-ui/components/typography.scss */
.type-neutral-4 {
  color: #8d8e8e !important;
}

/* line 393, ../src/pivotal-ui/components/typography.scss */
.type-neutral-5 {
  color: #b4b4b4 !important;
}

/* line 394, ../src/pivotal-ui/components/typography.scss */
.type-neutral-6 {
  color: #c3c5c7 !important;
}

/* line 395, ../src/pivotal-ui/components/typography.scss */
.type-neutral-7 {
  color: #d4d9d9 !important;
}

/* line 396, ../src/pivotal-ui/components/typography.scss */
.type-neutral-8 {
  color: #e0e4e5 !important;
}

/* line 397, ../src/pivotal-ui/components/typography.scss */
.type-neutral-9 {
  color: #ecefef !important;
}

/* line 398, ../src/pivotal-ui/components/typography.scss */
.type-neutral-10 {
  color: #F8F8F8 !important;
}

/* line 399, ../src/pivotal-ui/components/typography.scss */
.type-neutral-11 {
  color: white !important;
}

/* line 403, ../src/pivotal-ui/components/typography.scss */
.type-dark-1 {
  color: #243640 !important;
}

/* line 404, ../src/pivotal-ui/components/typography.scss */
.type-dark-2 {
  color: #3f484f !important;
}

/* line 405, ../src/pivotal-ui/components/typography.scss */
.type-dark-3 {
  color: #525c63 !important;
}

/* line 409, ../src/pivotal-ui/components/typography.scss */
.type-brand-1 {
  color: #025a53 !important;
}

/* line 410, ../src/pivotal-ui/components/typography.scss */
.type-brand-2 {
  color: #00776d !important;
}

/* line 411, ../src/pivotal-ui/components/typography.scss */
.type-brand-3 {
  color: #00a79d !important;
}

/* line 412, ../src/pivotal-ui/components/typography.scss */
.type-brand-4 {
  color: #92d0c0 !important;
}

/* line 413, ../src/pivotal-ui/components/typography.scss */
.type-brand-5 {
  color: #71ffda !important;
}

/* line 417, ../src/pivotal-ui/components/typography.scss */
.type-accent-1 {
  color: #1a739e !important;
}

/* line 418, ../src/pivotal-ui/components/typography.scss */
.type-accent-2 {
  color: #2185c5 !important;
}

/* line 419, ../src/pivotal-ui/components/typography.scss */
.type-accent-3 {
  color: #49a8d5 !important;
}

/* line 420, ../src/pivotal-ui/components/typography.scss */
.type-accent-4 {
  color: #a7c9e0 !important;
}

/* line 421, ../src/pivotal-ui/components/typography.scss */
.type-accent-5 {
  color: #c3f4ff !important;
}

/* line 425, ../src/pivotal-ui/components/typography.scss */
.type-error-1 {
  color: #b31612 !important;
}

/* line 426, ../src/pivotal-ui/components/typography.scss */
.type-error-2 {
  color: #eb3d46 !important;
}

/* line 427, ../src/pivotal-ui/components/typography.scss */
.type-error-3 {
  color: #ff434c !important;
}

/* line 428, ../src/pivotal-ui/components/typography.scss */
.type-error-4 {
  color: #febfc1 !important;
}

/* line 432, ../src/pivotal-ui/components/typography.scss */
.type-warn-1 {
  color: #B59033 !important;
}

/* line 433, ../src/pivotal-ui/components/typography.scss */
.type-warn-2 {
  color: #F1C148 !important;
}

/* line 434, ../src/pivotal-ui/components/typography.scss */
.type-warn-3 {
  color: #F9F3C3 !important;
}

/* line 438, ../src/pivotal-ui/components/typography.scss */
.type-success-1 {
  color: #165450 !important;
}

/* line 439, ../src/pivotal-ui/components/typography.scss */
.type-success-2 {
  color: #AFD79B !important;
}

/* line 441, ../src/pivotal-ui/components/typography.scss */
.type-inverse {
  color: #e0e4e5 !important;
}

/* line 444, ../src/pivotal-ui/components/typography.scss */
a:hover.type-inverse {
  color: #025a53 !important;
}

/* line 448, ../src/pivotal-ui/components/typography.scss */
.error-color {
  color: #ff434c !important;
}

/*doc
---
title: React Typography
name: type_react
category: Beta
---
We have three type systems. Which one you choose depends on your product.

* Marketing sites should use the largest styles, for example `<UI.MarketingH1>A Top Level Heading</UI.MarketingH1>`
* Most sites will use our default headings, for example `<UI.DefaultH1>A Top Level Heading</UI.DefaultH1>`
* Rarely, sites will need a smaller type scale, for example `<UI.AlternateH1>A Top Level Heading</UI.AlternateH1>`

*/
/*doc
---
title: Default Typography
name: 01_type_react_default
parent: type_react
---

```react_example_table
<UI.DefaultH1>h1 31px</UI.DefaultH1>

<UI.DefaultH2>h2 25px</UI.DefaultH2>

<UI.DefaultH3>h3 20px</UI.DefaultH3>

<UI.DefaultH4>h4 18px</UI.DefaultH4>

<UI.DefaultH5>h5 16px</UI.DefaultH5>

<UI.DefaultH6>h6 13px</UI.DefaultH6>
```

*/
/*doc
---
title: Alternate Typography
name: 02_type_react_alt
parent: type_react
---


```react_example_table
<UI.AlternateH1>This is an H1</UI.AlternateH1>

<UI.AlternateH2>This is an H2</UI.AlternateH2>

<UI.AlternateH3>This is an H3</UI.AlternateH3>

<UI.AlternateH4>This is an H4</UI.AlternateH4>

<UI.AlternateH5>This is an H5</UI.AlternateH5>

<UI.AlternateH6>This is an H6</UI.AlternateH6>
```
*/
/*doc
---
title: Marketing Headings
name: 03_type_react_marketing
parent: type_react
---

```react_example_table
<UI.MarketingH1>This is an h1</UI.MarketingH1>

<UI.MarketingH2>This is an h2</UI.MarketingH2>

<UI.MarketingH3>This is an h3</UI.MarketingH3>

<UI.MarketingH4>This is an h4</UI.MarketingH4>

<UI.MarketingH5>This is an h5</UI.MarketingH5>

<UI.MarketingH6>This is an h6</UI.MarketingH6>
```

*/
/*doc
---
title: Custom Headings
name: 04_type_react_custom
parent: type_react
---

Usually, you want to use the provided headings. If your mock doesn't exactly match, you should try the normal headings,
and see if it still looks ok. If it doesn't (this should be rare!) you can use our custom type generator.

You may want to wrap this in a custom reusable React component rather than calling it directly.

```react_example
<UI.Heading element="h1" bold="high" color="type-brand-2">This is an h1 on most apps</UI.Heading>
```

*/
/*doc
---
title: Iconography
name: iconography
categories:
  - Elements
  - All
---

We use [Font Awesome](http://fontawesome.github.io/Font-Awesome/icons/) for scalable vector icons that can be customized - size, color, drop shadow,
and anything that can be done with CSS. These icons will always match the font color.

Here are some commonly used icons:

Button                                             | Class                  | Description
-------------------------------------------------- | ---------------------- | -----------
<i class="fa fa-plus"></i>                         | `.fa.fa-plus`          | Renders our plus icon
<i class="fa fa-user"></i>                         | `.fa.fa-user`          | Renders our person icon
<i class="fa fa-sort-down"></i>                    | `.fa.fa-sort-down`     | Renders our triangle icon
<i class="fa fa-cog"></i>                          | `.fa.fa-cog`           | Renders our gear icon
<i class="fa fa-times"></i>                        | `.fa.fa-times`         | Renders our 'x' icon
<i class="fa fa-check"></i>                        | `.fa.fa-check`         | Renders our check icon
<i class="fa fa-chevron-right"></i>                | `.fa.fa-chevron-right` | Renders our right chevron icon
<i class="fa fa-chevron-up"></i>                   | `.fa.fa-chevron-up`    | Renders our down chevron icon
<i class="fa fa-chevron-down"></i>                 | `.fa.fa-chevron-down`  | Renders our down chevron icon
<i class="fa fa-windows"></i>                      | `.fa.fa-windows`       | Renders our Windows icon
<i class="fa fa-apple"></i>                        | `.fa.fa-apple`         | Renders our Apple icon
<i class="fa fa-linux"></i>                        | `.fa.fa-linux`         | Renders our Linux icon
<i class="fa fa-pencil"></i>                       | `.fa.fa-pencil`        | Renders our edit icon
<i class="fa fa-plus-circle"></i>                  | `.fa.fa-plus-circle`   | Renders our second add icon
<i class="fa fa-trash-o"></i>                      | `.fa.fa-trash-o`       | Renders our delete icon
<i class="fa fa-square"></i>                       | `.fa.fa-square`        | Renders our square icon
<i class="fa fa-repeat"></i>                       | `.fa.fa-repeat`        | Renders our refresh/restart icon
<i class="fa fa-play"></i>                         | `.fa.fa-play`          | Renders our start icon
<i class="fa fa-download"></i>                     | `.fa.fa-download`      | Renders our download icon

```html_example
<i class="fa fa-download type-brand-3 title"></i>
```

*/
/* line 43, ../src/pivotal-ui/components/iconography.scss */
.icon-control {
  font-size: 22px;
}

/*doc
---
title: React Icons
name: react_icon
categories:
  - Beta
---

We use [Font Awesome](http://fontawesome.github.io/Font-Awesome/icons/).
Specify the icon by changing the name. The name is the font-awesome class sans the `fa-`.
To spin the icon, add `spin` to the Icon.

```react_example_table
<UI.Icon name="plus" />

<UI.Icon spin name="angellist" />
```


*/
/*doc
---
title: Buttons
name: button
categories:
  - Elements
  - All
---

Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:

```html_example_table
<button class="btn btn-primary">Button</button>

<a class="btn btn-primary" href="http://trulia.com">Link</a>
```

If your button is actually a link to another page, please use the
`<a>` element, while if your button performs an action, such as submitting
a form or triggering some javascript event, then use a `<button>` element.

*/
/*doc
---
title: Full Width
name: button_full_width
parent: button
---

There is an additional modifier that will make the button take the
full width of the container. It may be used with the any of the button
size and style modifiers.

Create block level buttons - those that span the full width of a parent - by adding `.btn-block`.

```html_example
<button class="btn btn-primary btn-block">Full width button</button>
```

*/
/* line 45, ../src/pivotal-ui/components/buttons.scss */
.btn {
  font-weight: 900;
  padding: 5px 15px;
}
/* line 49, ../src/pivotal-ui/components/buttons.scss */
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14);
}

/*doc
---
title: Styles
name: button_styles
parent: button
---

Button                                                             | Disabled                                                                    | Class                   | Description
------------------------------------------------------------------ | --------------------------------------------------------------------------  | ----------------------- | -----------
<button class="btn btn-default">Default</button>                   |<button class="btn btn-default" disabled>Default</button>                    | `btn btn-default`       | This is what buttons look like, this is the go to button style.
<button class="btn btn-default-alt">Default alternate</button>     |<button class="btn btn-default-alt" disabled>Default alternate</button>      | `btn btn-default-alt`   | This is what buttons look like, this is the go to button style (on white backgrounds).
<button class="btn btn-primary">Primary</button>                   |<button class="btn btn-primary" disabled>Primary</button>                    | `btn btn-primary`       | Use this button as the primary call to action
<button class="btn btn-lowlight">Lowlight</button>                 |<button class="btn btn-lowlight" disabled>Lowlight</button>                  | `btn btn-lowlight`      | Use this button for other actions, like cancel/dismiss
<button class="btn btn-danger">Delete</button>                     |<button class="btn btn-danger" disabled>Delete</button>                      | `btn btn-danger`        | This button is for delete actions, these actions should also have a confirmation dialog
<button class="btn btn-highlight">Highlight</button>               |<button class="btn btn-highlight" disabled>Highlight</button>               | `btn btn-highlight`      | Use this button for other important actions, e.g. restarting apps
<button class="btn btn-highlight-alt">Highlight alternate</button> |<button class="btn btn-highlight-alt" disabled>Highlight alternate</button> | `btn btn-highlight-alt`  | Use this button for other important actions, e.g. marketing call to actions
*/
/* line 76, ../src/pivotal-ui/components/buttons.scss */
.btn-default {
  color: #2185c5;
  background-color: rgba(255, 255, 255, 0.4);
  border: none;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
/* line 24, ../src/pivotal-ui/components/mixins.scss */
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {
  color: #2185c5;
  background-color: white;
  outline: none;
}
/* line 32, ../src/pivotal-ui/components/mixins.scss */
.open .btn-default.dropdown-toggle {
  color: #2185c5;
  background-color: white;
}
/* line 36, ../src/pivotal-ui/components/mixins.scss */
.btn-default:active, .btn-default.active {
  background-image: none;
}
/* line 40, ../src/pivotal-ui/components/mixins.scss */
.open .btn-default.dropdown-toggle {
  background-image: none;
}
/* line 46, ../src/pivotal-ui/components/mixins.scss */
.btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active {
  background-color: #ecefef;
  color: #b4b4b4;
}

/* line 80, ../src/pivotal-ui/components/buttons.scss */
.btn-default-alt {
  color: #2185c5;
  background-color: #F8F8F8;
  border: none;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
}
/* line 24, ../src/pivotal-ui/components/mixins.scss */
.btn-default-alt:hover, .btn-default-alt:focus, .btn-default-alt:active, .btn-default-alt.active {
  color: #2185c5;
  background-color: #ecefef;
  outline: none;
}
/* line 32, ../src/pivotal-ui/components/mixins.scss */
.open .btn-default-alt.dropdown-toggle {
  color: #2185c5;
  background-color: #ecefef;
}
/* line 36, ../src/pivotal-ui/components/mixins.scss */
.btn-default-alt:active, .btn-default-alt.active {
  background-image: none;
}
/* line 40, ../src/pivotal-ui/components/mixins.scss */
.open .btn-default-alt.dropdown-toggle {
  background-image: none;
}
/* line 46, ../src/pivotal-ui/components/mixins.scss */
.btn-default-alt.disabled, .btn-default-alt.disabled:hover, .btn-default-alt.disabled:focus, .btn-default-alt.disabled:active, .btn-default-alt.disabled.active, .btn-default-alt[disabled], .btn-default-alt[disabled]:hover, .btn-default-alt[disabled]:focus, .btn-default-alt[disabled]:active, .btn-default-alt[disabled].active, fieldset[disabled] .btn-default-alt, fieldset[disabled] .btn-default-alt:hover, fieldset[disabled] .btn-default-alt:focus, fieldset[disabled] .btn-default-alt:active, fieldset[disabled] .btn-default-alt.active {
  background-color: #ecefef;
  color: #b4b4b4;
}
/* line 59, ../src/pivotal-ui/components/mixins.scss */
.btn-default-alt:hover, .btn-default-alt:focus, .btn-default-alt:active, .btn-default-alt.active {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14);
}

/* line 85, ../src/pivotal-ui/components/buttons.scss */
.btn-primary {
  color: #2185c5;
  background-color: white;
  border: none;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
}
/* line 24, ../src/pivotal-ui/components/mixins.scss */
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
  color: #2185c5;
  background-color: white;
  outline: none;
}
/* line 32, ../src/pivotal-ui/components/mixins.scss */
.open .btn-primary.dropdown-toggle {
  color: #2185c5;
  background-color: white;
}
/* line 36, ../src/pivotal-ui/components/mixins.scss */
.btn-primary:active, .btn-primary.active {
  background-image: none;
}
/* line 40, ../src/pivotal-ui/components/mixins.scss */
.open .btn-primary.dropdown-toggle {
  background-image: none;
}
/* line 46, ../src/pivotal-ui/components/mixins.scss */
.btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled]:active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary.active {
  background-color: #ecefef;
  color: #b4b4b4;
}
/* line 59, ../src/pivotal-ui/components/mixins.scss */
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14);
}

/* line 90, ../src/pivotal-ui/components/buttons.scss */
.btn-highlight {
  color: white;
  background-color: #2185c5;
  border: none;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
}
/* line 24, ../src/pivotal-ui/components/mixins.scss */
.btn-highlight:hover, .btn-highlight:focus, .btn-highlight:active, .btn-highlight.active {
  color: white;
  background-color: #1a739e;
  outline: none;
}
/* line 32, ../src/pivotal-ui/components/mixins.scss */
.open .btn-highlight.dropdown-toggle {
  color: white;
  background-color: #1a739e;
}
/* line 36, ../src/pivotal-ui/components/mixins.scss */
.btn-highlight:active, .btn-highlight.active {
  background-image: none;
}
/* line 40, ../src/pivotal-ui/components/mixins.scss */
.open .btn-highlight.dropdown-toggle {
  background-image: none;
}
/* line 46, ../src/pivotal-ui/components/mixins.scss */
.btn-highlight.disabled, .btn-highlight.disabled:hover, .btn-highlight.disabled:focus, .btn-highlight.disabled:active, .btn-highlight.disabled.active, .btn-highlight[disabled], .btn-highlight[disabled]:hover, .btn-highlight[disabled]:focus, .btn-highlight[disabled]:active, .btn-highlight[disabled].active, fieldset[disabled] .btn-highlight, fieldset[disabled] .btn-highlight:hover, fieldset[disabled] .btn-highlight:focus, fieldset[disabled] .btn-highlight:active, fieldset[disabled] .btn-highlight.active {
  background-color: #ecefef;
  color: #b4b4b4;
}
/* line 59, ../src/pivotal-ui/components/mixins.scss */
.btn-highlight:hover, .btn-highlight:focus, .btn-highlight:active, .btn-highlight.active {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14);
}

/* line 95, ../src/pivotal-ui/components/buttons.scss */
.btn-highlight-alt {
  color: white;
  background-color: #00a79d;
  border: none;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
}
/* line 24, ../src/pivotal-ui/components/mixins.scss */
.btn-highlight-alt:hover, .btn-highlight-alt:focus, .btn-highlight-alt:active, .btn-highlight-alt.active {
  color: white;
  background-color: #00776d;
  outline: none;
}
/* line 32, ../src/pivotal-ui/components/mixins.scss */
.open .btn-highlight-alt.dropdown-toggle {
  color: white;
  background-color: #00776d;
}
/* line 36, ../src/pivotal-ui/components/mixins.scss */
.btn-highlight-alt:active, .btn-highlight-alt.active {
  background-image: none;
}
/* line 40, ../src/pivotal-ui/components/mixins.scss */
.open .btn-highlight-alt.dropdown-toggle {
  background-image: none;
}
/* line 46, ../src/pivotal-ui/components/mixins.scss */
.btn-highlight-alt.disabled, .btn-highlight-alt.disabled:hover, .btn-highlight-alt.disabled:focus, .btn-highlight-alt.disabled:active, .btn-highlight-alt.disabled.active, .btn-highlight-alt[disabled], .btn-highlight-alt[disabled]:hover, .btn-highlight-alt[disabled]:focus, .btn-highlight-alt[disabled]:active, .btn-highlight-alt[disabled].active, fieldset[disabled] .btn-highlight-alt, fieldset[disabled] .btn-highlight-alt:hover, fieldset[disabled] .btn-highlight-alt:focus, fieldset[disabled] .btn-highlight-alt:active, fieldset[disabled] .btn-highlight-alt.active {
  background-color: #ecefef;
  color: #b4b4b4;
}
/* line 59, ../src/pivotal-ui/components/mixins.scss */
.btn-highlight-alt:hover, .btn-highlight-alt:focus, .btn-highlight-alt:active, .btn-highlight-alt.active {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14);
}

/* line 100, ../src/pivotal-ui/components/buttons.scss */
.btn-lowlight {
  color: #686868;
  background-color: transparent;
  border: none;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
/* line 24, ../src/pivotal-ui/components/mixins.scss */
.btn-lowlight:hover, .btn-lowlight:focus, .btn-lowlight:active, .btn-lowlight.active {
  color: #686868;
  background-color: rgba(255, 255, 255, 0.6);
  outline: none;
}
/* line 32, ../src/pivotal-ui/components/mixins.scss */
.open .btn-lowlight.dropdown-toggle {
  color: #686868;
  background-color: rgba(255, 255, 255, 0.6);
}
/* line 36, ../src/pivotal-ui/components/mixins.scss */
.btn-lowlight:active, .btn-lowlight.active {
  background-image: none;
}
/* line 40, ../src/pivotal-ui/components/mixins.scss */
.open .btn-lowlight.dropdown-toggle {
  background-image: none;
}
/* line 46, ../src/pivotal-ui/components/mixins.scss */
.btn-lowlight.disabled, .btn-lowlight.disabled:hover, .btn-lowlight.disabled:focus, .btn-lowlight.disabled:active, .btn-lowlight.disabled.active, .btn-lowlight[disabled], .btn-lowlight[disabled]:hover, .btn-lowlight[disabled]:focus, .btn-lowlight[disabled]:active, .btn-lowlight[disabled].active, fieldset[disabled] .btn-lowlight, fieldset[disabled] .btn-lowlight:hover, fieldset[disabled] .btn-lowlight:focus, fieldset[disabled] .btn-lowlight:active, fieldset[disabled] .btn-lowlight.active {
  background-color: #ecefef;
  color: #b4b4b4;
}

/* line 105, ../src/pivotal-ui/components/buttons.scss */
.btn-danger {
  color: white;
  background-color: #ff434c;
  border: none;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
}
/* line 24, ../src/pivotal-ui/components/mixins.scss */
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
  color: white;
  background-color: #eb3d46;
  outline: none;
}
/* line 32, ../src/pivotal-ui/components/mixins.scss */
.open .btn-danger.dropdown-toggle {
  color: white;
  background-color: #eb3d46;
}
/* line 36, ../src/pivotal-ui/components/mixins.scss */
.btn-danger:active, .btn-danger.active {
  background-image: none;
}
/* line 40, ../src/pivotal-ui/components/mixins.scss */
.open .btn-danger.dropdown-toggle {
  background-image: none;
}
/* line 46, ../src/pivotal-ui/components/mixins.scss */
.btn-danger.disabled, .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled:active, .btn-danger.disabled.active, .btn-danger[disabled], .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled]:active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger, fieldset[disabled] .btn-danger:hover, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger.active {
  background-color: #ecefef;
  color: #b4b4b4;
}
/* line 59, ../src/pivotal-ui/components/mixins.scss */
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14);
}

/*doc
---
title: Sizes
name: button_sizes
parent: button
---

There are two sizes for buttons: Large and default. Simply apply the
size modifier class for the desired size.

```html_example_table
<button class="btn btn-primary btn-lg">Large</button>

<button class="btn btn-primary">Default</button>
```

*/
/* line 128, ../src/pivotal-ui/components/buttons.scss */
.btn-lg, .btn-group-lg > .btn {
  padding: 10px 26px;
  font-size: 19px;
  line-height: 1.33;
  border-radius: 3px;
}

/*doc
---
title: Buttons
name: button_react
categories:
  - Beta
---

Buttons use the button tag by default. If you'd like a link rather than a button, simply add an `href` attribute.

```react_example_table
<UI.DefaultButton href="http://example.com">
  Default
</UI.DefaultButton>
```

To make a button large, set the `large` property to true.

```react_example_table
<UI.HighlightButton large="true">
  Big Button
</UI.HighlightButton>
```

To make a button full-width, set the `block` property to true.

```react_example
<UI.DangerButton block="true" href="http://i.imgur.com/oq2qkUN.gif">
  Danger Zone
</UI.DangerButton>
```

Specific button types.

```react_example_table
<UI.DefaultButton>
  Default
</UI.DefaultButton>

<UI.DefaultAltButton>
  Default alternate
</UI.DefaultAltButton>

<UI.PrimaryButton>
  Primary
</UI.PrimaryButton>

<UI.LowlightButton>
  Lowlight
</UI.LowlightButton>

<UI.DangerButton>
  Danger
</UI.DangerButton>

<UI.HighlightButton>
  Highlight
</UI.HighlightButton>

<UI.HighlightAltButton>
  Highlight alternate
</UI.HighlightAltButton>
```

The base button renderer. You won't really interact with this directly.

```react_example_table
<UI.UIButton>
  I'm a button
</UI.UIButton>
```
*/
/*doc
---
title: Links
name: link
categories:
  - Elements
  - All
---

Add the class `link-text` on any text links.
This will make the link underlined on hover (except lowlight links).

```html_example
<a class="link-text" href="http://bitly.com/11vCzUx">
  <i class="fa fa-plus"></i> Click me!
</a>
```

There are four different kinds of links you can use to connect related content.
In most cases (unless the designer specifically asks for another type of link)
you should choose the default link.

Link                                                                                                              | Class                           | Description
--------------------------------------------------------------------------------------------------------------    | ----------------------------    | -----------
<a class="link-text" href="http://bit.ly/1ulOAW7" target="_blank">default link</a>                                | `link-text`                     | Important links
<a class="link-text link-lowlight" href="http://bit.ly/1ulOAW7" target="_blank">lowlight link</a>                 | `link-text link-lowlight`       | Less important links
<a class="link-text link-lowlight-alt" href="http://bit.ly/1ulOAW7" target="_blank">lowlight link alternate</a>   | `link-text link-lowlight-alt`   | Less important links
<a class="link-text link-inverse bg-dark-1" href="http://bit.ly/1ulOAW7" target="_blank">inverse link</a>         | `link-text link-inverse`        | I go on a non-white background

```html_example
Here's a <a class="link-text link-lowlight" href="http://bit.ly/1wO7Nhv">less important link</a>
```

*/
/* line 36, ../src/pivotal-ui/components/links.scss */
a {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
/* line 39, ../src/pivotal-ui/components/links.scss */
a:hover, a:focus {
  cursor: pointer;
  text-decoration: none;
}
/* line 45, ../src/pivotal-ui/components/links.scss */
a.link-text:not(.link-lowlight):hover {
  text-decoration: underline;
}

/* line 52, ../src/pivotal-ui/components/links.scss */
.link-lowlight {
  font-weight: 700;
  color: #a7c9e0;
}
/* line 56, ../src/pivotal-ui/components/links.scss */
.link-lowlight:hover {
  color: #2185c5;
}

/* line 61, ../src/pivotal-ui/components/links.scss */
.link-lowlight-alt {
  color: #8d8e8e;
}
/* line 64, ../src/pivotal-ui/components/links.scss */
.link-lowlight-alt:hover {
  color: #1a739e;
}

/* line 69, ../src/pivotal-ui/components/links.scss */
.link-inverse {
  color: #49a8d5;
}
/* line 72, ../src/pivotal-ui/components/links.scss */
.link-inverse:hover {
  color: #a7c9e0;
}

/*pending
---
title: Gentle Scroll Links
name: gentle-scroll
categories:
  - Utilities
  - Objects
  - All
---

If you want to gently scroll from one part of the page to another, you'll need to add
a `data-behavior: GentleScroll` to the trigger element as well as an `href` for the
id of the target it will scroll to.

```html_example
<a class="btn btn-default" data-behavior="GentleScroll" href="#scroll-target">Scroll Trigger</a>
```

It can scroll to anything, in this case, we'll use a text input.

```html_example
<input class="form-control" id="scroll-target" placeholder="Scroll target" type="text"></input>
```

*/
/*doc
---
title: Grids
name: grid
categories:
  - Layout
  - All
---

<p class="h3">
  Pivotal ui (via bootstrap) includes a responsive, <strong>mobile first</strong> fluid grid system that
  appropriately scales up to 24 columns as the device or viewport size increases.
  To work with the system, you need to <strong>treat mobile as your default</strong>
  and build more complex layouts up from there.
</p>

*/
/*doc
---
title: Introduction
name: 01_grid_intro
parent: grid
---

Grid systems are used for creating page layouts through a series of rows and columns that house your content.
Here's how the bootstrap grid system works:

* Rows must be placed within a `.container` for proper alignment and padding.

* Use `.row` to create horizontal groups of columns.

* Content should be placed within columns (e.g. `.col-sm-11`, `.col-lg-6`, etc.).
Only columns may be immediate children of rows.

Columns are defined by two properties:
the breakpoint at which they start acting like columns,
and their relative width (on a scale of 24) beginning at this breakpoint.
For example:

* A column with the class `.col-sm-11` will take up 100% of the container
for devices with screen-width &lt; 768px (the extra small breakpoint),
and 11/24ths for devices &geq; 768px.

* A column with the class `.col-lg-6` will take up 100% of the container
for devices with &lt; 1200px,
and 1/4th (6/24ths) for devices &geq; 1200px.

* 3 `.col-md-8` columns would fill a row for devices &geq; 992px.
They would each take up their own row on devices &lt; 992px.

* Use the `.col-xs-*` classes to use a grid on mobile.

Look to the [examples][04_grid_examples] for applying these principles to your code.
*/
/*doc
---
title: Media Queries
name: 02_grid_media_queries
parent: grid
---

We use the following media queries in our sass files to create the key breakpoints in our grid system.

Name      |   Size         | Variable Name
--------- | -------------- | ------------------
mobile    |                | no media query since this is the default in bootstrap
x-small   | 480px          | `$screen-xs-min`
small     | 768px          | `$screen-sm-min`
medium    | 992px          | `$screen-md-min`
large     | 1200px         | `$screen-lg-min`
x-large   | 1800px         | `$screen-xl-min`

*/
/*doc
---
title: Grid Sizes
name: 03_grid_sizes
parent: grid
---

See how aspects of the bootstrap grid system work across multiple devices with a handy table.

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th></th>
      <th>
        extra small devices
        <small>phones (&leq;768px)</small>
      </th>
      <th>
        small devices
        <small>tablets (&gt;768px)</small>
      </th>
      <th>
        medium devices
        <small>laptops (&gt;992px)</small>
      </th>
      <th>
        large devices
        <small>desktops (&gt;1200px)</small>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="text-nowrap">grid behavior</th>
      <td>horizontal at all times</td>
      <td colspan="3">collapsed to start, horizontal above breakpoints</td>
    </tr>
    <tr>
      <th class="text-nowrap">container width</th>
      <td>none (auto)</td>
      <td>750px</td>
      <td>970px</td>
      <td>1170px</td>
    </tr>
    <tr>
      <th class="text-nowrap">class prefix</th>
      <td><code>.col-xs-</code></td>
      <td><code>.col-sm-</code></td>
      <td><code>.col-md-</code></td>
      <td><code>.col-lg-</code></td>
    </tr>
    <tr>
      <th class="text-nowrap"># of columns</th>
      <td colspan="4">24</td>
    </tr>
    <tr>
      <th class="text-nowrap">column width</th>
      <td>auto</td>
      <td>~62px</td>
      <td>~81px</td>
      <td>~97px</td>
    </tr>
    <tr>
      <th class="text-nowrap">gutter width</th>
      <td colspan="4">30px (15px on each side of a column)</td>
    </tr>
    <tr>
      <th class="text-nowrap">nestable</th>
      <td colspan="4">yes</td>
    </tr>
    <tr>
      <th class="text-nowrap">offsets</th>
      <td colspan="4">yes</td>
    </tr>
    <tr>
      <th class="text-nowrap">column ordering</th>
      <td colspan="4">yes</td>
    </tr>
  </tbody>
</table>

*/
/*doc
---
title: Examples
name: 04_grid_examples
parent: grid
---

Using a single set of `.col-md-*` grid classes,
you can create a basic grid system that starts out stacked on mobile devices and tablet devices
(the extra small to small range) before becoming horizontal on desktop (medium) devices.
Place grid columns in any `.row`.

<div class="alert alert-warning mbxl">
  <p>The <code>.grid-show</code> class in the examples is for demo purposes. Don't use it IRL.</p>
</div>

```html_example
<div class="row grid-show">
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
</div>

<div class="row grid-show">
  <div class="col-md-16"></div>
  <div class="col-md-8"></div>
</div>

<div class="row grid-show">
  <div class="col-md-8"></div>
  <div class="col-md-8"></div>
  <div class="col-md-8"></div>
</div>

<div class="row grid-show">
  <div class="col-md-12"></div>
  <div class="col-md-12"></div>
</div>
```
*/
/*doc
---
title: "Example: Mobile and Desktop"
name: 04_a_grid_mobile_and_desktop
parent: 04_grid_examples
---

Don't want your columns to simply stack in smaller devices?
Use the extra small and medium device grid classes by adding `.col-xs-*` `.col-md-*` to your columns.
See the example below for a better idea of how it all works.

```html_example
<!-- stack the columns on mobile by making one full-width and the other half-width -->
<div class="row grid-show">
  <div class="col-xs-24 col-md-16"></div>
  <div class="col-xs-12 col-md-8"></div>
</div>

<!-- columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row grid-show">
  <div class="col-xs-12 col-md-8"></div>
  <div class="col-xs-12 col-md-8"></div>
  <div class="col-xs-12 col-md-8"></div>
</div>

<!-- columns are always 50% wide, on mobile and desktop -->
<div class="row grid-show">
  <div class="col-xs-12"></div>
  <div class="col-xs-12"></div>
</div>
```

*/
/*doc
---
title: "Example: Mobile, Tablet, Desktops"
name: 04_b_grid_mobile_tablet_desktop
parent: 04_grid_examples
---

Build on the previous example by creating even more dynamic and powerful layouts
with tablet `.col-sm-*` classes.

```html_example
<div class="row grid-show">
  <div class="col-xs-24 col-sm-12 col-md-16"></div>
  <div class="col-xs-12 col-md-8"></div>
</div>
<div class="row grid-show">
  <div class="col-xs-12 col-sm-8"></div>
  <div class="col-xs-12 col-sm-8"></div>
  <!-- optional: clear the xs cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-12 col-sm-8"></div>
</div>
```

*/
/*doc
---
title: "Example: Column Wrapping"
name: 04_c_grid_column_wrapping
parent: 04_grid_examples
---

If more than 24 columns are placed within a single row, each group of extra columns will,
as one unit, wrap onto a new line.

```html_example
<div class="row grid-show">
  <div class="col-xs-12"></div>
  <div class="col-xs-12"></div>
  <div class="col-xs-10"></div>
  <div class="col-xs-10"></div>
  <div class="col-xs-5"></div>
  <div class="col-xs-6"></div>
</div>
```

**note** In the second row, since 10 + 10 + 5 &gt; 24,
the 5-column-wide div gets wrapped onto a new line as one contiguous unit.
Subsequent columns continue along the new line.

*/
/*doc
---
title: Gutter Sizes
name: 04_grid_gutter_sizes
parent: grid
---

You can change the size of a row's gutters with these classes.

Class            | Padding between columns
---------------- | --------------------------
default          | 20px
`.row-gutter-md` | 10px
`.row-gutter-sm` | 5px

Here's what the gutters look like in action.

```html_example_table
<div class="row grid-show">
  <div class="col-md-12" grid-content="Default gutter"></div>
  <div class="col-md-12" grid-content="Default gutter"></div>
</div>

<div class="row row-gutter-md grid-show">
  <div class="col-md-12" grid-content="Medium gutter"></div>
  <div class="col-md-12" grid-content="Medium gutter"></div>
</div>

<div class="row row-gutter-sm grid-show">
  <div class="col-md-12" grid-content="Small gutter"></div>
  <div class="col-md-12" grid-content="Small gutter"></div>
</div>
```
*/
/* line 332, ../src/pivotal-ui/components/grids.scss */
.row-gutter-sm {
  margin-left: -2px;
  margin-right: -2px;
}
/* line 336, ../src/pivotal-ui/components/grids.scss */
.row-gutter-sm > [class^="col"] {
  padding-left: 2px;
  padding-right: 2px;
}

/* line 342, ../src/pivotal-ui/components/grids.scss */
.row-gutter-md {
  margin-left: -5px;
  margin-right: -5px;
}
/* line 346, ../src/pivotal-ui/components/grids.scss */
.row-gutter-md > [class^="col"] {
  padding-left: 5px;
  padding-right: 5px;
}

/*doc
---
title: Responsive Column Resets
name: 08_grid_column_resets
parent: grid
---

With the four tiers of grids available you're bound to run into issues where,
at certain breakpoints, your columns don't clear quite right as one is taller than the other.
To fix that, use a combination of a `.clearfix`
and our [responsive utility classes][responsive_utilities].

```html_example
<div class="row grid-show">
  <div class="col-xs-12 col-sm-6" grid-content="this is a tall column"></div>
  <div class="col-xs-12 col-sm-6"></div>

  <!-- add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-12 col-sm-6"></div>
  <div class="col-xs-12 col-sm-6"></div>
</div>
```

*/
/*doc
---
title: Offsetting Columns
name: 09_grid_offsetting
parent: grid
---

Move columns to the right using `.col-md-offset-*` classes.
These classes increase the left margin of a column by `*` columns.
For example, `.col-md-offset-4` moves `.col-md-4` over four columns.

```html_example
<div class="row grid-show">
  <div class="col-md-8"></div>
  <div class="col-md-8 col-md-offset-8"></div>
</div>
<div class="row grid-show">
  <div class="col-md-6 col-md-offset-6"></div>
  <div class="col-md-6 col-md-offset-6"></div>
</div>
<div class="row grid-show">
  <div class="col-md-12 col-md-offset-6"></div>
</div>
```

*/
/*doc
---
title: Column Ordering
name: 10_grid_ordering
parent: grid
---

Easily change the order of our built-in grid columns
with `.col-md-push-*` and `.col-md-pull-*` modifier classes.
This is useful if you want to change the order of columns at different screen sizes.

```html_example
<div class="row grid-show">
  <div class="col-md-18 col-md-push-6"></div>
  <div class="col-md-6 col-md-pull-18"></div>
</div>
```

*/
@media (min-width: 1800px) {
  /* line 27, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-13, .col-xl-14, .col-xl-15, .col-xl-16, .col-xl-17, .col-xl-18, .col-xl-19, .col-xl-20, .col-xl-21, .col-xl-22, .col-xl-23, .col-xl-24 {
    float: left;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-1 {
    width: 4.16667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-2 {
    width: 8.33333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-3 {
    width: 12.5%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-4 {
    width: 16.66667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-5 {
    width: 20.83333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-6 {
    width: 25%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-7 {
    width: 29.16667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-8 {
    width: 33.33333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-9 {
    width: 37.5%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-10 {
    width: 41.66667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-11 {
    width: 45.83333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-12 {
    width: 50%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-13 {
    width: 54.16667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-14 {
    width: 58.33333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-15 {
    width: 62.5%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-16 {
    width: 66.66667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-17 {
    width: 70.83333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-18 {
    width: 75%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-19 {
    width: 79.16667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-20 {
    width: 83.33333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-21 {
    width: 87.5%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-22 {
    width: 91.66667%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-23 {
    width: 95.83333%;
  }

  /* line 35, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-24 {
    width: 100%;
  }

  /* line 55, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-0 {
    right: auto;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-1 {
    right: 4.16667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-2 {
    right: 8.33333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-3 {
    right: 12.5%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-4 {
    right: 16.66667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-5 {
    right: 20.83333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-6 {
    right: 25%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-7 {
    right: 29.16667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-8 {
    right: 33.33333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-9 {
    right: 37.5%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-10 {
    right: 41.66667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-11 {
    right: 45.83333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-12 {
    right: 50%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-13 {
    right: 54.16667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-14 {
    right: 58.33333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-15 {
    right: 62.5%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-16 {
    right: 66.66667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-17 {
    right: 70.83333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-18 {
    right: 75%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-19 {
    right: 79.16667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-20 {
    right: 83.33333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-21 {
    right: 87.5%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-22 {
    right: 91.66667%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-23 {
    right: 95.83333%;
  }

  /* line 50, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-pull-24 {
    right: 100%;
  }

  /* line 45, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-0 {
    left: auto;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-1 {
    left: 4.16667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-2 {
    left: 8.33333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-3 {
    left: 12.5%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-4 {
    left: 16.66667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-5 {
    left: 20.83333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-6 {
    left: 25%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-7 {
    left: 29.16667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-8 {
    left: 33.33333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-9 {
    left: 37.5%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-10 {
    left: 41.66667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-11 {
    left: 45.83333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-12 {
    left: 50%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-13 {
    left: 54.16667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-14 {
    left: 58.33333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-15 {
    left: 62.5%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-16 {
    left: 66.66667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-17 {
    left: 70.83333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-18 {
    left: 75%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-19 {
    left: 79.16667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-20 {
    left: 83.33333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-21 {
    left: 87.5%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-22 {
    left: 91.66667%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-23 {
    left: 95.83333%;
  }

  /* line 40, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-push-24 {
    left: 100%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-0 {
    margin-left: 0%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-1 {
    margin-left: 4.16667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-2 {
    margin-left: 8.33333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-3 {
    margin-left: 12.5%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-4 {
    margin-left: 16.66667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-5 {
    margin-left: 20.83333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-6 {
    margin-left: 25%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-7 {
    margin-left: 29.16667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-8 {
    margin-left: 33.33333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-9 {
    margin-left: 37.5%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-10 {
    margin-left: 41.66667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-11 {
    margin-left: 45.83333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-12 {
    margin-left: 50%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-13 {
    margin-left: 54.16667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-14 {
    margin-left: 58.33333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-15 {
    margin-left: 62.5%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-16 {
    margin-left: 66.66667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-17 {
    margin-left: 70.83333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-18 {
    margin-left: 75%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-19 {
    margin-left: 79.16667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-20 {
    margin-left: 83.33333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-21 {
    margin-left: 87.5%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-22 {
    margin-left: 91.66667%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-23 {
    margin-left: 95.83333%;
  }

  /* line 60, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */
  .col-xl-offset-24 {
    margin-left: 100%;
  }
}
/*doc
---
title: React Grids
name: grid_react
category: Beta
---

The react grids depend on [React-Bootstrap](http://react-bootstrap.github.io/components.html#grids). Check out their docs
for advanced stuff like pushing, pulling, and offsets.

*/
/*doc
---
title: React Grids Examples
name: 04_grid_examples_react
parent: grid_react
---


```react_example
<div>
  <UI.Row className="grid-show">
    <UI.Col md={2}></UI.Col>
    <UI.Col md={2}></UI.Col>
    <UI.Col md={2}></UI.Col>
    <UI.Col md={2}></UI.Col>
    <UI.Col md={2}></UI.Col>
    <UI.Col md={2}></UI.Col>
    <UI.Col md={2}></UI.Col>
    <UI.Col md={2}></UI.Col>
    <UI.Col md={2}></UI.Col>
    <UI.Col md={2}></UI.Col>
    <UI.Col md={2}></UI.Col>
    <UI.Col md={2}></UI.Col>
  </UI.Row>

  <UI.Row className="grid-show">
    <UI.Col md={16}></UI.Col>
    <UI.Col md={8}></UI.Col>
  </UI.Row>

  <UI.Row className="grid-show">
    <UI.Col md={8}></UI.Col>
    <UI.Col md={8}></UI.Col>
    <UI.Col md={8}></UI.Col>
  </UI.Row>

  <UI.Row className="grid-show">
    <UI.Col md={12}></UI.Col>
    <UI.Col md={12}></UI.Col>
  </UI.Row>
</div>
```
*/
/*doc
---
title: "React Example: Mobile and Desktop"
name: 04_a_grid_mobile_and_desktop_react
parent: 04_grid_examples_react
---

Don't want your columns to simply stack in smaller devices?
Use the extra small and medium device grid classes by adding `.col-xs-*` `.col-md-*` to your columns.
See the example below for a better idea of how it all works.

```react_example
<div>
  <UI.Row className="grid-show">
    <UI.Col xs={24} md={16}></UI.Col>
    <UI.Col xs={12} md={8}></UI.Col>
  </UI.Row>

  <UI.Row className="grid-show">
    <UI.Col xs={12} md={8}></UI.Col>
    <UI.Col xs={12} md={8}></UI.Col>
    <UI.Col xs={12} md={8}></UI.Col>
  </UI.Row>

  <UI.Row className="grid-show">
    <UI.Col xs={12}></UI.Col>
    <UI.Col xs={12}></UI.Col>
  </UI.Row>
</div>
```

*/
/*doc
---
title: React Gutter Sizes
name: 04_grid_gutter_sizes_react
parent: grid_react
---

```react_example
<div>
  <UI.Row className="grid-show">
    <UI.Col md={12}></UI.Col>
    <UI.Col md={12}></UI.Col>
  </UI.Row>

  <UI.Row className="grid-show" gutter="md">
    <UI.Col md={12}></UI.Col>
    <UI.Col md={12}></UI.Col>
  </UI.Row>

  <UI.Row className="grid-show" gutter="sm">
    <UI.Col md={12}></UI.Col>
    <UI.Col md={12}></UI.Col>
  </UI.Row>
</div>
```
*/
/*pending
---
title: Responsive
name: grid_responsive
parent: grid
---

Having trouble debugging grids? You can also set `$grids-debug: true` in the `grids.css.scss` file.
This will allow you to visualize the changes taking place at different device widths.

*/
/*doc
---
title: Media
name: media
categories:
  - Layout
  - All
---

The default media displays a media object (images, video, audio) to the left or right of a content block.

```html_example
<div class="media">
  <a class="media-left" href="#">
    <img alt="..." class="media-object" src="http://placehold.it/64x64"/>
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>

<div class="media">
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  </div>
  <a class="media-right" href="#">
    <img alt="..." class="media-object" src="http://placehold.it/64x64"/>
  </a>
</div>
```

Wrap the image in a fixed-size `.image-container` to make sure the image isn't
larger than the container

```html_example
<div class="media">
  <a class="media-left" href="#">
    <div class="image-container" style="width: 100px; height: 50px;">
      <img alt="..." class="media-object" src="http://placehold.it/64x64"/>
    </div>
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </p>
  </div>
</div>
```

You can also nest media objects inside of each other (useful for comment threads or articles lists).

```html_example
<div class="media">
  <a class="media-left" href="#" target="_blank">
    <img alt="..." class="media-object" src="http://placehold.it/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>

    <!-- Nested media object -->
    <div class="media">
      <a class="media-left" href="#" target="_blank">
        <img alt="..." class="media-object" src="http://placehold.it/64x64">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Nested media heading</h4>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

        <!-- Nested media object -->
        <div class="media">
          <a class="media-left" href="#" target="_blank">
            <img alt="..." class="media-object" src="http://placehold.it/64x64">
          </a>
          <div class="media-body">
            <h4 class="media-heading">Nested media heading</h4>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
          </div>
        </div>
      </div>
    </div>

    <!-- Nested media object -->
    <div class="media">
      <a class="media-left" href="#" target="_blank">
        <img alt="..." class="media-object" src="http://placehold.it/64x64">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Nested media heading</h4>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
      </div>
    </div>
  </div>
</div>
```

*/
/*doc
---
title: Alignment
name: media_alignment
parent: media
---

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

```html_example
<div class="media">
  <a class="media-left" href="#" target="_blank">
    <img alt="..." class="media-object" src="http://placehold.it/40x40">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Top aligned media</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>

<div class="media">
  <a class="media-left media-middle" href="#" target="_blank">
    <img alt="..." class="media-object" src="http://placehold.it/40x40">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>

<div class="media">
  <a class="media-left media-bottom" href="#" target="_blank">
    <img alt="..." class="media-object" src="http://placehold.it/40x40">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Bottom aligned media</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>
```

*/
/*doc
---
title: Stackable
name: media_stackable
parent: media
---


You can also make the media block stack with grid columns.
Media objects switch from being stacked on top to being floated left of the media body as the screen size gets larger.
For example, `.media-stackable-xs` is stacked on screen sizes from 0-480px and then left floated on larger screens.

```html_example
<div class="media media-stackable-xs">
  <a class="media-left" href="#" target="_blank">
    <img alt="..." class="media-object" src="http://placehold.it/100x100">
  </a>
  <div class="media-body">
    <p>Extra-small stackable</p>
  </div>
</div>

<div class="media media-stackable-sm">
  <a class="media-left" href="#" target="_blank">
    <img alt="..." class="media-object" src="http://placehold.it/100x100">
  </a>
  <div class="media-body">
    <p>Small stackable</p>
  </div>
</div>

<div class="media media-stackable-md">
  <a class="media-left" href="#" target="_blank">
    <img alt="..." class="media-object" src="http://placehold.it/100x100">
  </a>
  <div class="media-body">
    <p>Medium stackable</p>
  </div>
</div>

<div class="media media-stackable-lg">
  <a class="media-left" href="#" target="_blank">
    <img alt="..." class="media-object" src="http://placehold.it/100x100">
  </a>
  <div class="media-body">
    <p>Large stackable</p>
  </div>
</div>
```

*/
@media (max-width: 480px) {
  /* line 202, ../src/pivotal-ui/components/media.scss */
  .media.media-stackable-xs > .pull-left, .media.media-stackable-xs .media-left {
    display: block;
    float: none;
    clear: both;
    margin: 0 auto 10px auto !important;
  }
  /* line 207, ../src/pivotal-ui/components/media.scss */
  .media.media-stackable-xs > .pull-left .media-object, .media.media-stackable-xs .media-left .media-object {
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 768px) {
  /* line 202, ../src/pivotal-ui/components/media.scss */
  .media.media-stackable-sm > .pull-left, .media.media-stackable-sm .media-left {
    display: block;
    float: none;
    clear: both;
    margin: 0 auto 10px auto !important;
  }
  /* line 207, ../src/pivotal-ui/components/media.scss */
  .media.media-stackable-sm > .pull-left .media-object, .media.media-stackable-sm .media-left .media-object {
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 992px) {
  /* line 202, ../src/pivotal-ui/components/media.scss */
  .media.media-stackable-md > .pull-left, .media.media-stackable-md .media-left {
    display: block;
    float: none;
    clear: both;
    margin: 0 auto 10px auto !important;
  }
  /* line 207, ../src/pivotal-ui/components/media.scss */
  .media.media-stackable-md > .pull-left .media-object, .media.media-stackable-md .media-left .media-object {
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 1200px) {
  /* line 202, ../src/pivotal-ui/components/media.scss */
  .media.media-stackable-lg > .pull-left, .media.media-stackable-lg .media-left {
    display: block;
    float: none;
    clear: both;
    margin: 0 auto 10px auto !important;
  }
  /* line 207, ../src/pivotal-ui/components/media.scss */
  .media.media-stackable-lg > .pull-left .media-object, .media.media-stackable-lg .media-left .media-object {
    margin-left: auto;
    margin-right: auto;
  }
}
/* line 232, ../src/pivotal-ui/components/media.scss */
.media .media-body {
  width: 1000000px;
}

/*doc
---
title: React Media
name: media_react
category: Beta
---

## General media object modifiers

Media Modifiers     | Options                                        | Description
------------------- | ---------------------------------------------- | --------------------------------------------------------------------------
`bodyAlignment`     | top (default), "middle", "bottom"              | Vertical alignment of the body (used for large images with small content next to it, usually centered)
`stackSize    `     | "xsmall", "small", "medium", "large"           | At what breakpoint should the media object stack

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

The base button renderer. You won't really interact with this directly.

```jsx_example
var mediaBasicImage = <UI.Image src='http://placehold.it/50x50' />;
var mediaBasicLinkedImage = <UI.Image src='http://placehold.it/50x50' href="http://google.com" />;
```

```react_example_table
<UI.Media
  leftImage={mediaBasicImage}>
    left media
</UI.Media>

<UI.Media
  rightImage={mediaBasicLinkedImage}
  vAlign='middle'>
    right media
</UI.Media>

<UI.Media
  leftImage={mediaBasicImage}
  rightImage={mediaBasicImage}
  vAlign='middle'
  stackSize='medium'>
    left and right media
</UI.Media>
```

*/
/*doc
---
title: Alignment
name: media_alignment_react
parent: media_react
---

```jsx_example
var mediaAlignmentImage = <UI.Image href='http://www.google.com' src='http://placehold.it/50x50'/>;
```

```react_example
<div>
  <UI.Media leftImage={mediaAlignmentImage}>
      top aligned image - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </UI.Media>

  <UI.Flag leftImage={mediaAlignmentImage}>
      middle aligned image - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </UI.Flag>

  <UI.Flag leftImage={mediaAlignmentImage}>
      middle aligned and middle body (for short text and big images)
  </UI.Flag>

  <UI.Media
    leftImage={mediaAlignmentImage}
    vAlign='bottom'>
      bottom aligned - This is rarely, if ever, used. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </UI.Media>
</div>
```
*/
/*doc
---
title: Spacing
name: media_spacing_react
parent: media_react
---


Media spacing can be added to the left and right medias. If no spacing is defined, it defaults to large.

```jsx_example
var mediaSpacingImage = <UI.Image href='http://www.google.com' src='http://placehold.it/50x50'/>;
```

```react_example_table
<UI.Media leftImage={mediaSpacingImage}>
    default image spacing media
</UI.Media>

<UI.Media
  leftImage={mediaSpacingImage}
  leftMediaSpacing='small'>
    small image spacing media
</UI.Media>

<UI.Media
  leftImage={mediaSpacingImage}
  leftMediaSpacing='medium'>
    medium image spacing media
</UI.Media>

<UI.Media
  leftImage={mediaSpacingImage}
  leftMediaSpacing='large'>
    large image spacing media
</UI.Media>

<UI.Media
  leftImage={mediaSpacingImage}
  leftMediaSpacing='xlarge'>
    xlarge image spacing media
</UI.Media>
```

*/
/*doc
---
title: Tables
name: table
categories:
  - Objects
  - All
---


Class                 | Description
--------------------- | -----------------
`.table`              | Base table class, applies spacing and cross browser support. Unfortunately inherits some undesirable styles from bootstrap.
`.table-hover`        | Adds a light blue background color to table rows when the user hovers over them (use to indicate clickability)
`.table-striped`      | Applies zebra striping to a table.
`.table-light`        | Lightens the table background.

*/
/*pending
---
title: JS Tables
name: table_js
categories:
  - Objects
  - All
---

This section contains different table behaviors. See [tables][table] to see different table styles.
*/
/* line 34, ../src/pivotal-ui/components/tables.scss */
.table-hack .thead, .table-hack .tbody {
  padding: 0 15px;
}
/* line 37, ../src/pivotal-ui/components/tables.scss */
.table-hack .th {
  padding: 8px 15px;
}
/* line 40, ../src/pivotal-ui/components/tables.scss */
.table-hack .td {
  padding: 20px 15px;
}

/*doc
---
title: Data
name: table_data
parent: table
---

This is a table used to display many rows of data (it is pretty much the default table). You can use grid column classes on th and td elements. See key-value table for example.

Design Note: The `table-data` is often paired with `table-light` as in our example.

```html_example
<table class="table table-data table-light">
  <thead>
    <tr>
      <th>Service Instance</th>
      <th>Service Plan</th>
      <th>Bound Apps</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>oracle-db-sct</td>
      <td>Oracle DB</td>
      <td>12</td>
    </tr>
    <tr>
      <td>oracle-db-sct</td>
      <td>Oracle DB</td>
      <td>12</td>
    </tr>
    <tr>
      <td>oracle-db-sct</td>
      <td>Oracle DB</td>
      <td>12</td>
    </tr>
    <tr>
      <td>oracle-db-sct</td>
      <td>Oracle DB</td>
      <td>12</td>
    </tr>
  </tbody>
</table>
```

*/
/* line 97, ../src/pivotal-ui/components/tables.scss */
.table-data {
  border: none;
}
/* line 100, ../src/pivotal-ui/components/tables.scss */
.table-data tbody tr, .table-data tbody .tr, .table-data thead tr, .table-data thead .tr, .table-data .tbody tr, .table-data .tbody .tr, .table-data .thead tr, .table-data .thead .tr {
  border-bottom: 1px solid #d4d9d9;
}
/* line 102, ../src/pivotal-ui/components/tables.scss */
.table-data tbody tr th, .table-data tbody tr .th, .table-data tbody .tr th, .table-data tbody .tr .th, .table-data thead tr th, .table-data thead tr .th, .table-data thead .tr th, .table-data thead .tr .th, .table-data .tbody tr th, .table-data .tbody tr .th, .table-data .tbody .tr th, .table-data .tbody .tr .th, .table-data .thead tr th, .table-data .thead tr .th, .table-data .thead .tr th, .table-data .thead .tr .th {
  border-bottom: none;
  border-color: #d4d9d9;
  border-right: 1px solid #d4d9d9;
  padding: 15px 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.3px;
  background-color: #ecefef;
}
/* line 110, ../src/pivotal-ui/components/tables.scss */
.table-data tbody tr th:first-child, .table-data tbody tr .th:first-child, .table-data tbody .tr th:first-child, .table-data tbody .tr .th:first-child, .table-data thead tr th:first-child, .table-data thead tr .th:first-child, .table-data thead .tr th:first-child, .table-data thead .tr .th:first-child, .table-data .tbody tr th:first-child, .table-data .tbody tr .th:first-child, .table-data .tbody .tr th:first-child, .table-data .tbody .tr .th:first-child, .table-data .thead tr th:first-child, .table-data .thead tr .th:first-child, .table-data .thead .tr th:first-child, .table-data .thead .tr .th:first-child {
  border-bottom: none;
}
/* line 113, ../src/pivotal-ui/components/tables.scss */
.table-data tbody tr th:last-child, .table-data tbody tr .th:last-child, .table-data tbody .tr th:last-child, .table-data tbody .tr .th:last-child, .table-data thead tr th:last-child, .table-data thead tr .th:last-child, .table-data thead .tr th:last-child, .table-data thead .tr .th:last-child, .table-data .tbody tr th:last-child, .table-data .tbody tr .th:last-child, .table-data .tbody .tr th:last-child, .table-data .tbody .tr .th:last-child, .table-data .thead tr th:last-child, .table-data .thead tr .th:last-child, .table-data .thead .tr th:last-child, .table-data .thead .tr .th:last-child {
  border: none;
}
/* line 118, ../src/pivotal-ui/components/tables.scss */
.table-data tbody tr td, .table-data tbody tr .td, .table-data tbody .tr td, .table-data tbody .tr .td, .table-data thead tr td, .table-data thead tr .td, .table-data thead .tr td, .table-data thead .tr .td, .table-data .tbody tr td, .table-data .tbody tr .td, .table-data .tbody .tr td, .table-data .tbody .tr .td, .table-data .thead tr td, .table-data .thead tr .td, .table-data .thead .tr td, .table-data .thead .tr .td {
  padding: 10px 10px;
  border: none;
}
/* line 126, ../src/pivotal-ui/components/tables.scss */
.table-data tbody tr, .table-data tbody .tr, .table-data .tbody tr, .table-data .tbody .tr {
  background-color: #ecefef;
}
/* line 128, ../src/pivotal-ui/components/tables.scss */
.table-data tbody tr:hover, .table-data tbody .tr:hover, .table-data .tbody tr:hover, .table-data .tbody .tr:hover {
  -webkit-transition: background-color 300ms ease-out;
  -moz-transition: background-color 300ms ease-out;
  transition: background-color 300ms ease-out;
  background-color: #F8F8F8;
}
/* line 134, ../src/pivotal-ui/components/tables.scss */
.table-data tbody tr:last-child, .table-data tbody .tr:last-child, .table-data .tbody tr:last-child, .table-data .tbody .tr:last-child {
  border-bottom: 2px solid rgba(0, 0, 0, 0.07);
}
/* line 141, ../src/pivotal-ui/components/tables.scss */
.table-data > thead > tr, .table-data > .thead > .tr {
  text-transform: uppercase;
}
/* line 145, ../src/pivotal-ui/components/tables.scss */
.table-data > thead > tr > th, .table-data > thead > tr > .th, .table-data > .thead > .tr > th, .table-data > .thead > .tr > .th {
  color: #686868;
}

/* line 153, ../src/pivotal-ui/components/tables.scss */
.table-light tbody tr, .table-light tbody .tr, .table-light thead tr, .table-light thead .tr, .table-light .tbody tr, .table-light .tbody .tr, .table-light .thead tr, .table-light .thead .tr {
  background-color: #F8F8F8;
}
/* line 155, ../src/pivotal-ui/components/tables.scss */
.table-light tbody tr th, .table-light tbody tr .th, .table-light tbody tr td, .table-light tbody tr .td, .table-light tbody .tr th, .table-light tbody .tr .th, .table-light tbody .tr td, .table-light tbody .tr .td, .table-light thead tr th, .table-light thead tr .th, .table-light thead tr td, .table-light thead tr .td, .table-light thead .tr th, .table-light thead .tr .th, .table-light thead .tr td, .table-light thead .tr .td, .table-light .tbody tr th, .table-light .tbody tr .th, .table-light .tbody tr td, .table-light .tbody tr .td, .table-light .tbody .tr th, .table-light .tbody .tr .th, .table-light .tbody .tr td, .table-light .tbody .tr .td, .table-light .thead tr th, .table-light .thead tr .th, .table-light .thead tr td, .table-light .thead tr .td, .table-light .thead .tr th, .table-light .thead .tr .th, .table-light .thead .tr td, .table-light .thead .tr .td {
  background-color: #F8F8F8;
}
/* line 158, ../src/pivotal-ui/components/tables.scss */
.table-light tbody tr td, .table-light tbody tr .td, .table-light tbody .tr td, .table-light tbody .tr .td, .table-light thead tr td, .table-light thead tr .td, .table-light thead .tr td, .table-light thead .tr .td, .table-light .tbody tr td, .table-light .tbody tr .td, .table-light .tbody .tr td, .table-light .tbody .tr .td, .table-light .thead tr td, .table-light .thead tr .td, .table-light .thead .tr td, .table-light .thead .tr .td {
  border: none;
}

/*doc
---
title: Key-Value
name: table_key_value
parent: table
---

This table is used when the table headings are on the left. It looks better when you
specify column widths for the th/tds.


```html_example
<table class="table table-key-value">
  <tbody>
    <tr>
      <th class="col-md-8">Email</th>
      <td class="col-md-16">joe@example.com</td>
    </tr>
    <tr>
      <th class="col-md-8">Current Password</th>
      <td class="col-md-16">*******</td>
    </tr>
    <tr>
      <th class="col-md-8">First Name</th>
      <td class="col-md-16">Joe</td>
    </tr>
    <tr>
      <th class="col-md-8">Last Name</th>
      <td class="col-md-16">Bobs</td>
    </tr>
    <tr>
      <th class="col-md-8">Phone</th>
      <td class="col-md-16">415-555-0000</td>
    </tr>
  </tbody>
</table>
```

*/
/* line 204, ../src/pivotal-ui/components/tables.scss */
.table-key-value {
  table-layout: fixed;
}
/* line 208, ../src/pivotal-ui/components/tables.scss */
.table-key-value tbody tr th, .table-key-value tbody tr .th, .table-key-value tbody .tr th, .table-key-value tbody .tr .th, .table-key-value thead tr th, .table-key-value thead tr .th, .table-key-value thead .tr th, .table-key-value thead .tr .th, .table-key-value .tbody tr th, .table-key-value .tbody tr .th, .table-key-value .tbody .tr th, .table-key-value .tbody .tr .th, .table-key-value .thead tr th, .table-key-value .thead tr .th, .table-key-value .thead .tr th, .table-key-value .thead .tr .th {
  border: none;
}
/* line 215, ../src/pivotal-ui/components/tables.scss */
.table-key-value tbody tr:last-child {
  border: none;
}
/* line 218, ../src/pivotal-ui/components/tables.scss */
.table-key-value tbody tr th, .table-key-value tbody tr td {
  padding: 0;
  margin: 0;
}
/* line 222, ../src/pivotal-ui/components/tables.scss */
.table-key-value tbody tr th {
  text-transform: uppercase;
  font-weight: 800;
  text-align: left;
  color: #b4b4b4;
}
/* line 228, ../src/pivotal-ui/components/tables.scss */
.table-key-value tbody tr td {
  text-align: left;
}
/* line 230, ../src/pivotal-ui/components/tables.scss */
.table-key-value tbody tr td:last-child {
  border: none;
}

/*pending
---
title: Clickable
name: table_clickable
parent: table_js
---

Use this style of table when rows are clickable. It is possible to prevent a user from clicking on a row w/ a message by adding data-prevent-click and data-prevent-click-message to the row. (N.B.: This does not actually add any sort of permissions to the URL in question).
We are making the assumption here that table-hover will *only* be used if the table is clickable, because we add a pointer.



```html_example
<table class="table table-data table-hover" data-behavior="ClickableTable">
  <thead>
    <tr>
      <th>Style</th>
      <th colspan="2">Clickability</th>
    </tr>
  </thead>
  <tbody>
    <tr data-prevent-click="true" data-prevent-click-message="YOU'VE ENTERED THE FORBIDDEN ZONE" data-target-path="/styleguide#link">
      <td>Forbidden Links</td>
      <td>High</td>
      <td class="txt-m txt-r">
        <i class="fa fa-chevron-right type-primary-4"></i>
      </td>
    </tr>
    <tr data-target-path="/styleguide#button">
      <td>Buttons</td>
      <td>Medium</td>
      <td class="txt-m txt-r">
        <i class="fa fa-chevron-right type-primary-4"></i>
      </td>
    </tr>
    <tr data-target-path="/styleguide#type">
      <td>Typography</td>
      <td>Low</td>
      <td class="txt-m txt-r">
        <i class="fa fa-chevron-right type-primary-4"></i>
      </td>
    </tr>
  </tbody>
</table>
```

*/
/* line 287, ../src/pivotal-ui/components/tables.scss */
.table-hover td {
  cursor: pointer;
}

/*doc
---
title: Alignment
name: table_alignment
parent: table
---

See the [alignment component][alignment] for classes to use for table text alignment.

*/
/* horizontal alignment */
/* vertical alignment */
/*doc
---
title: React Sortable Tables
name: table_react_sortable
categories:
 - Beta
---

```js_example
var sortTableCols = [
  {
    name: 'name',
    title: 'Name',
    sortable: true
  },
  {
    name: 'instances',
    title: 'Instances',
    sortable: true,
    align: 'center'
  },
  {
    name: 'cpu',
    title: 'CPU',
    sortable: true,
    align: 'right'
  },
  {
    name: 'synergy',
    title: 'Synergy',
    align: 'left'
  }
]

var sortTableData = [
  {
    instances: '1',
    name: 'foo',
    cpu: 'po',
    synergy: 'qum',
    ram: 'bee',
  },
  {
    name: 'yee',
    instances: 'di',
    cpu: 'no',
    synergy: 'aum'
  },
  {
    name: 'zee',
    instances: 'si',
    cpu: 'mo',
    synergy: 'wum'
  },
  {
    name: 'jee',
    instances: 'ui',
    cpu: 'no',
    synergy: 'mum'
  }
];
```

```react_example
<UI.SortableTable
  data={sortTableData}
  columns={sortTableCols}
  classes={['table-data', 'table-light']} />
```

*/
/*pending
---
title: Angular Sortable Table
name: table_angular_sortable
parent: table_js
---

USE:

1. Add a sorter in your controller scope that has a reference to the collection you want to sort.
2. Add "sortable" to any header/element which should trigger a sort (if the sortable directive doesn't do what you want, write a new one or just use ng-click. Please don't add more behavior to the current sortable).

```html_example
<table class="table table-data table-sortable" ng-cloak="<%= true %>" ng-controller="ExampleSpaceDataTableCtrl">
  <thead>
    <tr>
      <th class="txt-m" sortable="name">Name</th>
      <th sortable="totalApps">Total Apps</th>
      <th sortable="runningApps">Running Apps</th>
      <th sortable="stoppedApps">Stopped Apps</th>
      <th sortable="downApps">Down Apps</th>
      <th class="txt-m" sortable="serviceInstances">Service Instances</th>
      <th class="txt-m" sortable="quota">Quota</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="tableItem in tableItems">
      <td>{{tableItem.name}}</td>
      <td>{{tableItem.totalApps}}</td>
      <td>{{tableItem.runningApps}}</td>
      <td>{{tableItem.stoppedApps}}</td>
      <td>{{tableItem.downApps}}</td>
      <td>{{tableItem.serviceInstances}}</td>
      <td>{{tableItem.quota}}</td>
    </tr>
  </tbody>
</table>
```
*/
/* line 446, ../src/pivotal-ui/components/tables.scss */
.table-sortable th.sorted-desc {
  color: #243640;
}
/* line 448, ../src/pivotal-ui/components/tables.scss */
.table-sortable th.sorted-desc:after {
  content: "\f0d7";
  color: #243640;
}
/* line 454, ../src/pivotal-ui/components/tables.scss */
.table-sortable .sortable, .table-sortable [sortable] {
  cursor: pointer;
}
/* line 456, ../src/pivotal-ui/components/tables.scss */
.table-sortable .sortable:after, .table-sortable [sortable]:after {
  margin-left: 4px;
  content: "";
  font-weight: 200;
  font-family: FontAwesome;
}
/* line 462, ../src/pivotal-ui/components/tables.scss */
.table-sortable .sortable:hover, .table-sortable [sortable]:hover {
  background-color: white;
  -webkit-transition: background-color 300ms ease-out;
  -moz-transition: background-color 300ms ease-out;
  transition: background-color 300ms ease-out;
}
/* line 471, ../src/pivotal-ui/components/tables.scss */
.table-sortable th.sorted-none:hover:after {
  visibility: visible;
}
/* line 474, ../src/pivotal-ui/components/tables.scss */
.table-sortable th.sorted-none:after {
  content: "\f0dc";
  color: #d4d9d9;
  visibility: hidden;
}
/* line 481, ../src/pivotal-ui/components/tables.scss */
.table-sortable th.sorted-asc {
  color: #243640;
}
/* line 483, ../src/pivotal-ui/components/tables.scss */
.table-sortable th.sorted-asc:after {
  content: "\f0d8";
  color: #243640;
}

/*pending
---
title: Inline Addable
name: table_inline_addable
parent: table_js
---

```html_example
<div ng-class="{editing: spaceTable.editing}" ng-cloak="true" ng-controller="StyleguideAddableTableCtrl">
  <p class="txt-r">
    <a class="btn btn-default state-adding-trigger" href="javascript:void(0);" ng-click="spaceTable.enterEditMode()" ng-disabled="spaceTable.newModel.saving">
      Add a Space
    </a>
  </p>
  <table class="table table-data table-addable">
    <thead class="thead-state-viewing">
      <tr>
        <th class="txt-m col-md-8">
          Name
        </th>
        <th class="txt-m">
          Total Apps
        </th>
        <th class="txt-m">
          Running Apps
        </th>
        <th class="txt-m">
          Stopped Apps
        </th>
        <th class="txt-m">
          Down Apps
        </th>
        <th class="txt-m">
          Service Instance
        </th>
        <th class="txt-m">
          Quota
        </th>
        <th class="txt-m"></th>
      </tr>
    </thead>
    <thead class="state-editing-show">
      <tr>
        <th class="txt-m">
          Name
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="state-editing-show">
        <td>
          <form class="td-state-adding form-inline" name="newSpaceForm" ng-submit="spaceTable.save()">
            <div class="form-group mll">
              <input aria-describedby="space-name-error" autofocus="autofocus" class="form-control" invalid-invalid="true" name="name" ng-minlength="3" ng-model="spaceTable.newModel.name" required="true" type="text"></input>
            </div>
            <div class="form-group">
              <button class="btn btn-default" ng-disabled="!spaceTable.newModel.name" type="submit">Add</button>
              <a class="btn btn-default" ng-click="spaceTable.cancel()">Cancel</a>
            </div>
            <div class="error-container pal" id="space-name-error" ng-show="newSpaceForm.name.$dirty && newSpaceForm.name.$invalid" role="alert">
              <span class="error" ng-show="newSpaceForm.name.$error.required">Space name is required.</span>
              <span class="error" ng-show="newSpaceForm.name.$error.minlength">Space name is required to be at least 3 characters.</span>
              <span class="error" ng-show="newSpaceForm.name.$error.invalidInvalid">Space name cannot be invalid, literally.</span>
              <div ng-repeat="error in spaceTable.newModel.serverErrors">
                <span class="error">{{error}}</span>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr class="inline-table-item" ng-repeat="space in spaceTable.collection.items">
        <td class="pls type-ellipsis-1-line" ng-class="{saveRequested: space.saving}">
          <div class="fa fa-check fa-check-success ng-hide" ng-show="space.freshlySaved"></div>
          {{space.name}}
        </td>
        <td>{{space.totalApps}}</td>
        <td>{{space.runningApps}}</td>
        <td>{{space.stoppedApps}}</td>
        <td>{{space.downApps}}</td>
        <td>{{space.serviceInstances}}</td>
        <td>{{space.quota}}</td>
        <td data-confirmation-action="spaceTable.destroy(space)" data-confirmation-header="Delete Space" data-confirmation-modal="Are you sure you want to delete this space?" data-dangerous-action="true">Delete</td>
      </tr>
    </tbody>
  </table>
</div>
```
*/
/* line 580, ../src/pivotal-ui/components/tables.scss */
.editing .state-adding-trigger {
  visibility: hidden;
}
/* line 584, ../src/pivotal-ui/components/tables.scss */
.editing .table-addable .thead-state-viewing,
.editing .table-addable .td-state-viewing {
  display: none;
}
/* line 589, ../src/pivotal-ui/components/tables.scss */
.editing .table-addable td {
  display: none;
}
/* line 592, ../src/pivotal-ui/components/tables.scss */
.editing .table-addable td:first-child {
  display: table-cell;
}
/* line 595, ../src/pivotal-ui/components/tables.scss */
.editing .table-addable thead.state-editing-show {
  display: table-header-group;
}
/* line 598, ../src/pivotal-ui/components/tables.scss */
.editing .table-addable tr.state-editing-show {
  display: table-row;
}

/* line 604, ../src/pivotal-ui/components/tables.scss */
.table-addable {
  table-layout: fixed;
}
/* line 607, ../src/pivotal-ui/components/tables.scss */
.table-addable .state-editing-show {
  display: none;
}
/* line 611, ../src/pivotal-ui/components/tables.scss */
.table-addable .state-adding-item-show {
  display: none;
}
/* line 615, ../src/pivotal-ui/components/tables.scss */
.table-addable .inline-table-item.ng-enter.ng-enter-active {
  opacity: 1;
}
/* line 617, ../src/pivotal-ui/components/tables.scss */
.table-addable .inline-table-item.ng-enter.ng-enter-active .addedConfirmation {
  display: table-cell;
}
/* line 623, ../src/pivotal-ui/components/tables.scss */
.table-addable .inline-table-item .addedConfirmation {
  color: forestgreen;
}
/* line 628, ../src/pivotal-ui/components/tables.scss */
.table-addable .fa-check-success {
  color: #00a79d;
  font-size: 12px;
  margin-right: 5px;
  -webkit-transition: opacity 300ms ease-out;
  -moz-transition: opacity 300ms ease-out;
  transition: opacity 300ms ease-out;
  opacity: 1;
}
/* line 640, ../src/pivotal-ui/components/tables.scss */
.table-addable .fa-check-success.ng-hide {
  display: inline-block !important;
  opacity: 0;
}
/* line 645, ../src/pivotal-ui/components/tables.scss */
.table-addable .saveRequested {
  opacity: 0.3;
}
/* line 649, ../src/pivotal-ui/components/tables.scss */
.table-addable .deleteRequested {
  -webkit-transition: all ease-out .2s;
  transition: all ease-out .2s;
  color: #b4b4b4;
}
/* line 655, ../src/pivotal-ui/components/tables.scss */
.table-addable .ng-leave {
  -webkit-transition: all ease-out .5s;
  transition: all ease-out .5s;
}
/* line 660, ../src/pivotal-ui/components/tables.scss */
.table-addable .ng-leave.ng-leave-active {
  color: #ecefef;
}
/* line 664, ../src/pivotal-ui/components/tables.scss */
.table-addable .saved {
  opacity: 1;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}

/*pending
---
title: Kitchen Sink
name: table_kitchen_sink
parent: table_js
---

Example of composed behaviors that operate on the same table.

```html_example
<div ng-class="{editing: spaceTable.editing}" ng-cloak="true" ng-controller="StyleguideKitchenSinkTableCtrl">
  <p class="txt-r">
    <a class="btn btn-default state-adding-trigger" href="javascript:void(0);" ng-click="spaceTable.enterEditMode()" ng-disabled="spaceTable.newModel.saving">
      Add a Space
    </a>
  </p>
  <table class="table table-data table-sortable table-addable">
    <thead class="thead-state-viewing">
      <tr>
        <th class="txt-m" sortable="name">Name</th>
        <th sortable="totalApps">Total Apps</th>
        <th sortable="runningApps">Running Apps</th>
        <th sortable="stoppedApps">Stopped Apps</th>
        <th sortable="downApps">Down Apps</th>
        <th class="txt-m" sortable="serviceInstances">Service Instances</th>
        <th class="txt-m" sortable="quota">Quota</th>
      </tr>
    </thead>
    <thead class="state-editing-show">
      <tr>
        <th class="txt-m">
          Name
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="state-editing-show">
        <td>
          <form class="td-state-adding form-inline" name="newSpaceForm" ng-submit="spaceTable.save()">
            <div class="form-group mll">
              <input aria-describedby="space-name-error" autofocus="autofocus" class="form-control" invalid-invalid="true" name="name" ng-minlength="3" ng-model="spaceTable.newModel.name" required="true" type="text"></input>
            </div>
            <div class="form-group">
              <button class="btn btn-default" ng-disabled="!spaceTable.newModel.name" type="submit">Add</button>
              <a class="btn btn-default" ng-click="spaceTable.cancel()">Cancel</a>
            </div>
            <div class="error-container pal" id="space-name-error" ng-show="newSpaceForm.name.$dirty && newSpaceForm.name.$invalid" role="alert">
              <span class="error" ng-show="newSpaceForm.name.$error.required">Space name is required.</span>
              <span class="error" ng-show="newSpaceForm.name.$error.minlength">Space name is required to be at least 3 characters.</span>
              <span class="error" ng-show="newSpaceForm.name.$error.invalidInvalid">Space name cannot be invalid, literally.</span>
              <div ng-repeat="error in spaceTable.newModel.serverErrors">
                <span class="error">{{error}}</span>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr ng-repeat="space in spaceTable.collection.items">
        <td class="pls type-ellipsis-1-line" ng-class="{saveRequested: space.saving}">
          <div class="fa fa-check fa-check-success ng-hide" ng-show="space.freshlySaved"></div>
          {{space.name}}
        </td>
        <td>{{space.totalApps}}</td>
        <td>{{space.runningApps}}</td>
        <td>{{space.stoppedApps}}</td>
        <td>{{space.downApps}}</td>
        <td>{{space.serviceInstances}}</td>
        <td>{{space.quota}}</td>
      </tr>
    </tbody>
  </table>
</div>
```

*/
/*doc
---
title: Scrollable
name: scrollable_table
parent: table
---

Table with borders where the contents of the table scroll but the header does not.
The default height of the scrollable table is 183px. There are four other sizes provided
which you can use by adding the following classes to the `.table-scrollable` element.

Table Scrollable sizes | Height
---------------------- | ---------
default                | 183px
`.table-scrollable-sm` | 300px
`.table-scrollable-md` | 600px
`.table-scrollable-lg` | 900px

If you would like a custom size, please add an inline style to the `.table-scrollable-body` element.

Design Note: The `table-scrollable` is often paired with `table-data` and `table-light` as in our example.

<div class="alert alert-info alert-dismissable">
  <p class="em-high">
    You will need to specify the width of <strong>every</strong> column in both the <code>thead</code> and
    the first row of the <code>tbody</code>. You can do this with inline width attributes.
  </p>
</div>

```html_example
<div class="table-scrollable table-scrollable-sm">
  <div class="table-scrollable-header">
    <table class="table table-data table-light">
      <thead>
        <tr>
          <th width="10%">#</th>
          <th width="16%">Status</th>
          <th width="12%">CPU</th>
          <th width="16%">Memory</th>
          <th width="16%">Disk</th>
          <th width="30%">Uptime</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="table-scrollable-body">
    <table class="table table-data table-light">
      <tbody>
        <tr>
          <td width="10%">0</td>
          <td width="16%">Running</td>
          <td width="12%">0%</td>
          <td width="16%">4.16 MB</td>
          <td width="16%">6.75 MB</td>
          <td width="30%">27 min</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Running</td>
          <td>0%</td>
          <td>4.07 MB</td>
          <td>6.75 MB</td>
          <td>27 min</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Running</td>
          <td>0%</td>
          <td>4.07 MB</td>
          <td>6.75 MB</td>
          <td>25 min</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Running</td>
          <td>0%</td>
          <td>4.14 MB</td>
          <td>6.75 MB</td>
          <td>25 min</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Running</td>
          <td>0%</td>
          <td>4.08 MB</td>
          <td>6.75 MB</td>
          <td>25 min</td>
        </tr>
        <tr>
          <td>5</td>
          <td>Running</td>
          <td>0%</td>
          <td>4.16 MB</td>
          <td>6.75 MB</td>
          <td>25 min</td>
        </tr>
        <tr>
          <td>6</td>
          <td>Running</td>
          <td>0%</td>
          <td>4.07 MB</td>
          <td>6.75 MB</td>
          <td>25 min</td>
        </tr>
        <tr>
          <td>7</td>
          <td>Running</td>
          <td>0%</td>
          <td>4.07 MB</td>
          <td>6.75 MB</td>
          <td>25 min</td>
        </tr>
        <tr>
          <td>8</td>
          <td>Running</td>
          <td>0%</td>
          <td>4.03 MB</td>
          <td>6.75 MB</td>
          <td>25 min</td>
        </tr>
        <tr>
          <td>9</td>
          <td>Running</td>
          <td>0%</td>
          <td>4.07 MB</td>
          <td>6.75 MB</td>
          <td>25 min</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
```
*/
/* line 889, ../src/pivotal-ui/components/tables.scss */
.table-scrollable {
  border: 1px solid #e0e4e5;
}
/* line 892, ../src/pivotal-ui/components/tables.scss */
.table-scrollable table {
  table-layout: fixed;
}
/* line 894, ../src/pivotal-ui/components/tables.scss */
.table-scrollable table tr:last-child {
  border-bottom: none;
}
/* line 899, ../src/pivotal-ui/components/tables.scss */
.table-scrollable .table {
  margin: 0;
}
/* line 903, ../src/pivotal-ui/components/tables.scss */
.table-scrollable .table-scrollable-header {
  border-bottom: 2px solid #e0e4e5;
}
/* line 907, ../src/pivotal-ui/components/tables.scss */
.table-scrollable .table-scrollable-body {
  border-top: 3px solid #ecefef;
  max-height: 183px;
  overflow-y: auto;
  overflow-x: hidden;
}
/* line 915, ../src/pivotal-ui/components/tables.scss */
.table-scrollable.table-scrollable-sm .table-scrollable-body {
  max-height: 300px;
}
/* line 920, ../src/pivotal-ui/components/tables.scss */
.table-scrollable.table-scrollable-md .table-scrollable-body {
  max-height: 600px;
}
/* line 925, ../src/pivotal-ui/components/tables.scss */
.table-scrollable.table-scrollable-lg .table-scrollable-body {
  max-height: 900px;
}

/*doc
---
title: Panels
name: panel
categories:
  - Objects
  - All
---

Panels are often used to group related content. They include box headers, footers, and can be combined with any backgrounds.

Panels are typically a combination of contours, backgrounds, and content including headers and footers. This section describes the contours.

*/
/* line 16, ../src/pivotal-ui/components/panels.scss */
.panel {
  box-shadow: none;
}
/* line 18, ../src/pivotal-ui/components/panels.scss */
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 {
  margin: 0;
}

/* line 24, ../src/pivotal-ui/components/panels.scss */
.panel-title {
  font-size: inherit;
}

/*doc
---
title: Simple
name: panel_simple
parent: panel
---

```html_example
<div class="panel panel-simple bg-neutral-11">
  <div class="panel-body">
    Simple Panel
  </div>
</div>
```

*/
/* line 45, ../src/pivotal-ui/components/panels.scss */
.panel-simple {
  border: 1px solid #b4b4b4;
}

/*doc
---
title: Basic
name: panel_basic
parent: panel
---

Basic Panels are the new Simple Panels for G-Major

```html_example
<div class="panel panel-basic bg-neutral-11">
  <div class="panel-body">
    Basic Panel
  </div>
</div>
```

*/
/* line 68, ../src/pivotal-ui/components/panels.scss */
.panel-basic {
  border-radius: 5px;
  -moz-background-clip: padding;
  /* Firefox 3.6 */
  -webkit-background-clip: padding;
  /* Safari 4? Chrome 6? */
  background-clip: padding-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  border-bottom: 2px solid rgba(0, 0, 0, 0.07);
}

/*doc
---
title: Flex (Panel with Footer)
name: panel_flex
parent: panel
---

Flex panels let us put a footer at the bottom of a fixed-height panel. Any panel can flex. In browsers that don't
support flexbox, the footer will appear where it would naturally, likely right below the panel-body content.

By default, flex panels have no height. You must use an inline style to set the height.

```html_example
<div class="panel panel-flex bg-neutral-11" style="height:200px">
  <div class="panel-body">Body Content</div>
  <div class="panel-footer">Footer Content</div>
</div>
```

<div class="alert alert-info mbxl">
  <h5 class="em-high mtn">
    Flex panels and list cards
  </h5>
  <p>
    Flex panels are often used with <a class="alert-link" href="/elements.html#list_cards">list cards</a>
    as a way to give list cards footers.
    Add the class <code>list-card-wrapper</code> on any flex panels inside list cards.
  </p>
</div>

```html_example
<ul class="list-cards list-card-2 list-cards-sm">
  <li class="panel panel-flex bg-neutral-11">
    <div class="list-card-wrapper panel panel-flex">
      <div class="panel-body">Body Content</div>
      <div class="panel-footer">Footer Content</div>
    </div>
  </li>

  <li class="panel panel-flex bg-neutral-11">
    <form>
      <div class="list-card-wrapper panel panel-flex">
        <div class="panel-body">
          <p>
            It even works if your <code>list-card-wrapper</code> is nested in a form
          </p>
          <div class="form-group">
            <input class="form-control" placeholder="Email">
          </div>
        </div>
        <div class="panel-footer">Footer Content</div>
      </div>
    </form>
  </li>

  <li class="panel panel-flex bg-neutral-11">
    <a class="list-card-link" href="http://wrd.cm/1e2A8uU">
      <div class="list-card-wrapper panel panel-flex">
        <div class="panel-body">Or in a link!</div>
        <div class="panel-footer">Footer Content</div>
      </div>
    </a>
  </li>
</ul>
```
*/
/* line 141, ../src/pivotal-ui/components/panels.scss */
.panel-flex {
  display: block;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
/* line 146, ../src/pivotal-ui/components/panels.scss */
.panel-flex .panel-body {
  -webkit-flex: 1 0 auto;
  -webkit-align-self: auto;
  flex: 1 0 auto;
  align-self: auto;
}
/* line 153, ../src/pivotal-ui/components/panels.scss */
.panel-flex .panel-footer {
  -webkit-flex: 0 0 auto;
  -webkit-align-self: auto;
  flex: 0 0 auto;
  align-self: auto;
}

/*doc
---
title: Panel Tile
name: panel_tile
parent: console
---

Tile panels extend the behavior of flex panels. They provide an animated footer on hover, at the bottom of a fixed-height panel.

```html_example
<ul class="list-cards list-card-1 list-cards-lg">
  <li>
    <a class="list-card-link panel panel-flex panel-tile bg-neutral-11" href="http://www.google.com/">
      <div class="panel-body list-card-wrapper">
        Hover to see secondary state.
      </div>
      <div class="panel-footer">
        This is the footer
      </div>
    </a>
  </li>
</ul>
```

*/
/* line 188, ../src/pivotal-ui/components/panels.scss */
.panel-tile {
  border-bottom: 4px solid rgba(0, 0, 0, 0.07);
  overflow: hidden;
  color: #686868;
  -webkit-transition: border 300ms ease-out;
  -moz-transition: border 300ms ease-out;
  transition: border 300ms ease-out;
  -moz-background-clip: padding;
  /* Firefox 3.6 */
  -webkit-background-clip: padding;
  /* Safari 4? Chrome 6? */
  background-clip: padding-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
}
/* line 197, ../src/pivotal-ui/components/panels.scss */
.panel-tile .panel-body {
  -ms-flex: 1 0 auto;
  padding: 29px 29px 0 29px;
  -webkit-transition: padding-top 300ms ease-out;
  -moz-transition: padding-top 300ms ease-out;
  transition: padding-top 300ms ease-out;
}
/* line 205, ../src/pivotal-ui/components/panels.scss */
.panel-tile .panel-footer {
  color: #fff;
  opacity: 0;
  text-transform: uppercase;
  text-align: center;
  font-size: 12px;
  border-top: none;
  padding: 4px 15px;
  background: transparent;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
/* line 217, ../src/pivotal-ui/components/panels.scss */
.panel-tile:hover, .panel-tile:focus {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  border-width: 1px;
  background-color: #F8F8F8;
  color: #686868;
  cursor: pointer;
  outline: none;
}
/* line 226, ../src/pivotal-ui/components/panels.scss */
.panel-tile:hover .panel-body, .panel-tile:focus .panel-body {
  padding-top: 18px;
}
/* line 229, ../src/pivotal-ui/components/panels.scss */
.panel-tile:hover .panel-footer, .panel-tile:focus .panel-footer {
  opacity: 1;
  background: #2185c5;
  color: #F8F8F8;
  font-weight: 900;
}

/*doc
---
title: Scrollable
name: panel_scrollable
parent: panel
---

The scrollable panel sets a fixed height of 183px and scrolls any content that is larger. If you want a different size, set an inline style on the `.panel-scrollable`.

```html_example
<div class="panel panel-scrollable bg-neutral-11">
  <div class="panel-body">
    <p>Lo-fi fixie aute irony skateboard, officia pug. VHS Kickstarter semiotics elit ad. XOXO fashion axe Neutra aesthetic nihil, before they sold out seitan photo booth bitters paleo ea. XOXO mustache consectetur jean shorts wolf banh mi, food truck aute odio Neutra polaroid artisan mlkshk. Chillwave aesthetic hashtag, 3 wolf moon Neutra umami DIY swag eu veniam. Blue Bottle fap kale chips veniam kogi, placeat yr Portland nesciunt sustainable iPhone. Single-origin coffee messenger bag locavore Schlitz, ea farm-to-table aliquip anim umami master cleanse. Delectus selfies placeat, tilde hoodie qui selvage consectetur cred master cleanse readymade pop-up assumenda nisi. Eu deep v brunch McSweeney's. Raw denim aliquip Banksy, proident cred banjo qui placeat Brooklyn fashion axe crucifix normcore aesthetic. Esse Pinterest organic anim American Apparel, wolf next level Tumblr laboris normcore pop-up dolore lo-fi put a bird on it trust fund. Laborum organic authentic Williamsburg plaid, Wes Anderson dolore sunt chia small batch synth Carles cliche tilde. Food truck ethical freegan velit, Kickstarter semiotics labore American Apparel biodiesel street art gentrify trust fund. Selfies Austin ex, organic art party authentic ullamco kitsch plaid placeat roof party cornhole deserunt aute.</p>
  </div>
</div>
```

*/
/* line 258, ../src/pivotal-ui/components/panels.scss */
.panel-scrollable {
  max-height: 183px;
  overflow-y: overlay;
  overflow-x: hidden;
}

/*doc
---
title: Highlight
name: panel_highlight
parent: panel
---

This panel is used to highlight more important parts of the page.

```html_example
<div class="panel panel-highlight">
  <div class="panel-body">
    Not Hoverable (use when the panel has no associated action, for instance if the action is disabled due to lack of permissions)
  </div>
</div>
```

*/
/* line 283, ../src/pivotal-ui/components/panels.scss */
.panel-highlight, .panel-clickable-alt {
  background-color: #F8F8F8;
  border-radius: 10px;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.07);
}
/* line 288, ../src/pivotal-ui/components/panels.scss */
.panel-highlight.title-panel h1, .title-panel.panel-clickable-alt h1 {
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

/*doc
---
title: Alternate
name: panel_alt
parent: panel
---

Alternate panels can be in a default, off, or danger state.

```html_example_table
<div class="panel panel-alt">
  <div class="panel-body">
    Alternate Panel
  </div>
</div>

<div class="panel panel-alt panel-danger">
  <div class="panel-body">
    Danger alternate panel
  </div>
</div>

<div class="panel panel-alt panel-off">
  <div class="panel-body">
    Stopped alternate panel
  </div>
</div>

<div class="panel panel-alt panel-empty">
  <div class="panel-body">
    Off alternate panel
  </div>
</div>

<div class="panel panel-alt panel-editing">
  <div class="panel-body">
    Editing alternate panel
  </div>
</div>
```

*/
/* line 340, ../src/pivotal-ui/components/panels.scss */
.panel-alt.panel-editing {
  background-color: #ecefef;
}
/* line 345, ../src/pivotal-ui/components/panels.scss */
.panel-alt.panel-empty {
  background-color: rgba(0, 0, 0, 0.07);
}
/* line 348, ../src/pivotal-ui/components/panels.scss */
.panel-alt.panel-empty:hover {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  background-color: #ecefef;
  border-bottom: 4px solid rgba(0, 0, 0, 0.14);
}
/* line 355, ../src/pivotal-ui/components/panels.scss */
.panel-alt .aligner {
  min-height: 190px;
}
/* line 359, ../src/pivotal-ui/components/panels.scss */
.panel-alt .panel-basic {
  min-height: 88px;
}
/* line 365, ../src/pivotal-ui/components/panels.scss */
.panel-alt.panel-danger, .panel-alt.panel-off {
  position: relative;
}
/* line 367, ../src/pivotal-ui/components/panels.scss */
.panel-alt.panel-danger:before, .panel-alt.panel-off:before {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0px;
  height: 0px;
  border-left: 25px solid transparent;
}
/* line 383, ../src/pivotal-ui/components/panels.scss */
.panel-alt.panel-danger:before {
  border-top: 25px solid #ff434c;
}
/* line 387, ../src/pivotal-ui/components/panels.scss */
.panel-alt.panel-off:before {
  border-top: 25px solid #8d8e8e;
}

/*doc
---
title: Shadow
name: panel_shadow
parent: panel
---

Shadow panels add a bottom shadow to the panel.

```html_example_table
<div class="panel panel-shadow-1 bg-neutral-11">
  <div class="panel-body">
    Shadow Panel
  </div>
</div>

<div class="panel panel-shadow-2 bg-neutral-11">
  <div class="panel-body">
    Shadow Panel
  </div>
</div>

<div class="panel panel-shadow-3 bg-neutral-11">
  <div class="panel-body">
    Shadow Panel
  </div>
</div>

<div class="panel panel-shadow-4 bg-neutral-11">
  <div class="panel-body">
    Shadow Panel
  </div>
</div>
```

*/
/* line 428, ../src/pivotal-ui/components/panels.scss */
.panel-shadow, .panel-shadow-1, .panel-shadow-2, .panel-shadow-3, .panel-shadow-4 {
  border: none;
  -moz-background-clip: padding;
  /* Firefox 3.6 */
  -webkit-background-clip: padding;
  /* Safari 4? Chrome 6? */
  background-clip: padding-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

/* line 433, ../src/pivotal-ui/components/panels.scss */
.panel-shadow-1 {
  border-bottom: 4px solid rgba(0, 0, 0, 0.3);
}

/* line 438, ../src/pivotal-ui/components/panels.scss */
.panel-shadow-2 {
  border-bottom: 4px solid rgba(0, 0, 0, 0.14);
}

/* line 443, ../src/pivotal-ui/components/panels.scss */
.panel-shadow-3 {
  border-bottom: 4px solid rgba(0, 0, 0, 0.07);
}

/* line 448, ../src/pivotal-ui/components/panels.scss */
.panel-shadow-4 {
  border-bottom: 4px solid rgba(0, 0, 0, 0.035);
}

/*doc
---
title: Card
name: panel_card
parent: panel
---

Using panels with [card lists][list_cards] makes any `.panel-body` have a minimum "card" height.

```html_example
<ul class="list-cards list-cards-sm list-card-2">
  <li class="panel panel-clickable-alt bg-neutral-11">
    <div class="panel-body">
      Card Panel
    </div>
  </li>
  <li class="panel panel-clickable-alt bg-neutral-11">
    <div class="panel-body">
      Card Panel
    </div>
  </li>
  <li class="panel panel-clickable-alt bg-neutral-11">
    <div class="panel-body">
      Card Panel
    </div>
  </li>
</ul>
```

*/
/*doc
---
title: Clickable
name: panel_clickable
parent: panel
---

These panels lighten on hover to indicate that they are clickable.
Please use them when a click on the panel triggers an action.

```html_example_table
<div class="panel panel-clickable">
  <div class="panel-body">
    Panel Clickable
  </div>
</div>

<div class="panel panel-clickable-alt">
  <div class="panel-body">
    Panel Clickable Alt
  </div>
</div>
```

Sometimes you'll also want to adapt the way child elements look
based on a hover on the parent element. There are a few
helper classes for that.


```html_example_table
<a class="panel panel-clickable">
  <div class="panel-body">
    <p class="hover-target-1">
      hover-target-1 - default text color => link color
    </p>
  </div>
</a>

<a class="panel panel-clickable">
  <div class="panel-body">
    <p class="hover-target-2">
      hover-target-2 - light gray text => default text color
    </p>
  </div>
</a>

<a class="panel panel-clickable">
  <div class="panel-body">
    <p class="hover-target-3">
      hover-target-3 - $gray-9 background => white background
    </p>
  </div>
</a>
```

*/
/* line 541, ../src/pivotal-ui/components/panels.scss */
.panel-clickable, .panel-clickable-alt {
  display: block;
  background-color: #ecefef;
  cursor: pointer;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
/* line 547, ../src/pivotal-ui/components/panels.scss */
.panel-clickable .hover-target-1, .panel-clickable-alt .hover-target-1, .panel-clickable .hover-target-2, .panel-clickable-alt .hover-target-2, .panel-clickable .hover-target-3, .panel-clickable-alt .hover-target-3 {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
/* line 551, ../src/pivotal-ui/components/panels.scss */
.panel-clickable .hover-target-1, .panel-clickable-alt .hover-target-1 {
  color: #686868;
}
/* line 555, ../src/pivotal-ui/components/panels.scss */
.panel-clickable .hover-target-2, .panel-clickable-alt .hover-target-2 {
  color: #b4b4b4;
}
/* line 559, ../src/pivotal-ui/components/panels.scss */
.panel-clickable .hover-target-3, .panel-clickable-alt .hover-target-3 {
  background-color: #F8F8F8;
}
/* line 563, ../src/pivotal-ui/components/panels.scss */
.panel-clickable:hover, .panel-clickable-alt:hover {
  background-color: #F8F8F8;
}
/* line 566, ../src/pivotal-ui/components/panels.scss */
.panel-clickable:hover .hover-target-1, .panel-clickable-alt:hover .hover-target-1 {
  color: #2185c5;
}
/* line 569, ../src/pivotal-ui/components/panels.scss */
.panel-clickable:hover .hover-target-2, .panel-clickable-alt:hover .hover-target-2 {
  color: #686868;
}
/* line 572, ../src/pivotal-ui/components/panels.scss */
.panel-clickable:hover .hover-target-3, .panel-clickable-alt:hover .hover-target-3 {
  background-color: white;
}

/* line 578, ../src/pivotal-ui/components/panels.scss */
.panel-clickable-alt {
  background-color: #F8F8F8;
}
/* line 583, ../src/pivotal-ui/components/panels.scss */
.panel-clickable-alt:hover {
  background-color: white;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.14);
}

/*doc
---
title: React Panels
name: panel_react
categories:
 - Beta
---

Panels?!?! In Javascript?!?!

```react_example_table
<UI.Panel className="bg-neutral-8">
  <p>Base Panel</p>
</UI.Panel>
```
*/
/*doc
---
title: Scrolling React Panels
name: panel_react_scroll
parent: panel_react
---

```react_example_table
<UI.Panel className="bg-neutral-8" scrollable="100">
  <p>Scrollable Panel</p>
  <p>Scrollable Panel</p>
  <p>Scrollable Panel</p>
  <p>Scrollable Panel</p>
  <p>Scrollable Panel</p>
  <p>Scrollable Panel</p>
</UI.Panel>

<UI.Panel className="bg-neutral-8" scrollable="true">
  <p>Scrollable Panel</p>
  <p>Scrollable Panel</p>
  <p>Scrollable Panel</p>
  <p>Scrollable Panel</p>
  <p>Scrollable Panel</p>
  <p>Scrollable Panel</p>
  <p>Scrollable Panel</p>
  <p>Scrollable Panel</p>
</UI.Panel>
```
*/
/*doc
---
title: React Panels Padding
name: panel_react_padding
parent: panel_react
---

Add a "padding" attribute (i.e. `pal`, `pbn`, etc.) to change the padding on the `panel-body`.

```react_example_table
<UI.Panel className="bg-neutral-8" padding="paxxl">
  <p>Base Panel</p>
</UI.Panel>
```

*/
/*doc
---
title: Simple Panels
name: panel_react_simple
parent: panel_react
---

```react_example_table
<UI.SimplePanel>
  Simple Panel
</UI.SimplePanel>
```
*/
/*doc
---
title: Basic Panels
name: panel_react_basic
parent: panel_react
---

```react_example_table
<UI.BasicPanel>
  Basic Panel
</UI.BasicPanel>
```
*/
/*doc
---
title: Shadow Panels
name: panel_react_shadow
parent: panel_react
---

```react_example_table
<UI.ShadowPanel>Shadow Panel (Defaults to shadow level 3)</UI.ShadowPanel>

<UI.ShadowPanel shadowLevel="1">Shadow Panel (level 1)</UI.ShadowPanel>

<UI.ShadowPanel shadowLevel="2">Shadow Panel (level 2)</UI.ShadowPanel>

<UI.ShadowPanel shadowLevel="3">Shadow Panel (level 3)</UI.ShadowPanel>

<UI.ShadowPanel shadowLevel="4">Shadow Panel (level 4)</UI.ShadowPanel>
```

*/
/*doc
---
title: Clickable Panels
name: panel_react_clickable
parent: panel_react
---

```react_example_table
<UI.ClickablePanel>Clickable Panel</UI.ClickablePanel>

<UI.ClickableAltPanel>Clickable Panel (Alt)</UI.ClickableAltPanel>
```
*/
/*doc
---
title: Highlight Panels
name: panel_react_highlight
parent: panel_react
---

```react_example_table
<UI.HighlightPanel>
  Highlight Panel
</UI.HighlightPanel>
```
*/
/*doc
---
title: Divider Panels
name: panel_react_divider
parent: panel_react
---

```react_example_table
<UI.HighlightPanel divider>
  Highlight Panel
</UI.HighlightPanel>
```

*/
/*doc
---
title: Alerts
name: alert
categories:
  - Objects
  - All
---

Alerts are used to display flash messages to the user. When using alerts with simple one-line text,
wrap the text in a `<p>` with `.em-high`.

```html_example
<div class="alert alert-success">
  <p class="em-high">Success</p>
</div>
```

Alerts are also used to bring important notes to a user's attention. If the content of your alert
is a little more complicated, we would recommend using headings coupled with the content.

```html_example
<div class="alert alert-info">
  <h5 class="em-high mtn">You should know...</h5>
  <p>There are some things you should note. Just in case you didn't figure it out already.</p>
  <ul>
    <li>thing 1</li>
    <li>thing 2</li>
  </ul>
</div>
```

If you want to include a link in your alert, use the class `alert-link`.

```html_example
<div class="alert alert-warning">
  <h5 class="em-high mtn">Important Link</h5>
  <p>
    It is very important that you
    <a class="alert-link" href="http://bit.ly/1vkXaYb">click here</a>
  </p>
</div>
```
*/
/*doc
---
title: Alert Types
name: 01_alert_types
parent: alert
---

Our 4 alert types are:

```html_example_table
<div class="alert alert-success">
  <div class="media">
    <div class="media-left">
      <i class="fa fa-check-circle"></i>
    </div>
    <div class="media-body em-high">
      Everything is wonderful.
      <a class="alert-link" href="http://bit.ly/QCMZM5">Be happy.</a>
    </div>
  </div>
</div>

<div class="alert alert-info">
  <div class="media">
    <div class="media-left">
      <i class="fa fa-info-circle"></i>
    </div>
    <div class="media-body em-high">
      Info for you.
      <a class="alert-link" href="http://bit.ly/1DFns8H">Tell me more.</a>
    </div>
  </div>
</div>

<div class="alert alert-warning">
  <div class="media">
    <div class="media-left">
      <i class="fa fa-exclamation-triangle"></i>
    </div>
    <div class="media-body em-high">
      Warning: There is no parking on the dancefloor.
      <a class="alert-link" href="http://bit.ly/1uM05DJ">Be alert.</a>
    </div>
  </div>
</div>

<div class="alert alert-error">
  <div class="media">
    <div class="media-left">
      <i class="fa fa-exclamation-triangle"></i>
    </div>
    <div class="media-body em-high">
      Something has gone horribly awry.
      <a class="alert-link" href="http://bit.ly/1rooFJV">You've made a huge mistake.</a>
    </div>
  </div>
</div>
```

*/
/*doc
---
title: Dismissable Alerts
name: 02_alert_dismissable
parent: alert
---

By adding `.alert-dismissable` and a button, you can also make alerts dismissable.

```html_example
<div class="alert alert-success alert-dismissable">
  <button class="close" data-dismiss="alert">
    <i class="fa fa-times"></i>
  </button>
  <p class="em-high">Click the 'X' over there------> </p>
</div>

```

If a full-width dissmissable alert is desired, but the content needs to be aligned with
other content inside a container on the page (of a width 500px for this example), you might consider doing the following:

```html_example

<div class="pane bg-accent-5">
  <div class="container pan" style="width:500px">
    <div class="alert alert-info mtn">
      <button class="close" data-dismiss="alert">
        <i class="fa fa-times"></i>
      </button>
      <div class="media mtn">
        <div class="media-left">
          <i class="fa fa-info-circle"></i>
        </div>
        <div class="media-body em-high">
          3 new files available for Pivotal CF.
          <a class="type-sm alert-link" href="http://bit.ly/1DFns8H">Mark all as viewed.</a>
        </div>
      </div>
    </div>
  </div>
</div>

```

*/
/* line 154, ../src/pivotal-ui/components/alerts.scss */
.alert {
  border: none;
  margin: 1.5em 0 0;
}
/* line 158, ../src/pivotal-ui/components/alerts.scss */
.alert a.alert-link {
  color: inherit;
  text-decoration: underline;
}
/* line 163, ../src/pivotal-ui/components/alerts.scss */
.alert .close {
  text-decoration: none;
  line-height: .7;
  text-shadow: none;
}

/* line 170, ../src/pivotal-ui/components/alerts.scss */
.alert-success .alert-link:hover {
  color: #0b2c2a;
}

/* line 174, ../src/pivotal-ui/components/alerts.scss */
.alert-info .alert-link:hover {
  color: #135372;
}

/* line 178, ../src/pivotal-ui/components/alerts.scss */
.alert-warning .alert-link:hover {
  color: #8d7028;
}

/* line 186, ../src/pivotal-ui/components/alerts.scss */
.alert-error .alert-link:hover {
  color: #85100d;
}

/*doc
---
title: React Alerts
name: react_alerts
categories:
  - Beta
---

React alerts

```react_example_table
<UI.SuccessAlert>success</UI.SuccessAlert>

<UI.InfoAlert>info</UI.InfoAlert>

<UI.WarningAlert>warning</UI.WarningAlert>

<UI.ErrorAlert>error</UI.ErrorAlert>
```

*/
/*doc
---
title: Dismissable React Alerts
name: react_alerts_dismissable
parent: react_alerts
---

Add the `dismissable` property to add a close button to the alert.

```react_example_table
<UI.SuccessAlert dismissable>success</UI.SuccessAlert>
```

If you want a callback to be called when the close button is
clicked, set the `dismissable` property to that callback.

```jsx_example
var callback = function() {
  alert('Dismissed!');
};
```

```react_example_table
<UI.InfoAlert dismissable={callback}>with callback</UI.InfoAlert>
```

*/
/*doc
---
title: React Alerts with Icons
name: react_alerts_icon
parent: react_alerts
---

If you want an icon to be displayed, set the `withIcon` property.

```react_example_table
<UI.SuccessAlert withIcon>success</UI.SuccessAlert>

<UI.InfoAlert withIcon>info</UI.InfoAlert>

<UI.WarningAlert withIcon>warning</UI.WarningAlert>

<UI.ErrorAlert withIcon>error</UI.ErrorAlert>
```

Here's a dismissable alert with an icon

```react_example_table
<UI.WarningAlert dismissable withIcon>warning</UI.WarningAlert>
```
*/
/*doc
---
title: Dividers
name: divider
categories:
  - Elements
  - All
---

Dividers draw horizontal lines between different content groupings.

```html_example
<hr class="divider-alternate-1"/>
<hr class="divider-alternate-2"/>
<div class="contrast-bar">
  <hr class="divider-1"/>
  <hr class="divider-2"/>
</div>
```

*/
/* line 24, ../src/pivotal-ui/components/dividers.scss */
.divider-alternate-1 {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-width: 1px 0 0 0;
}

/* line 29, ../src/pivotal-ui/components/dividers.scss */
.divider-alternate-2 {
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-width: 3px 0 0 0;
}

/* line 34, ../src/pivotal-ui/components/dividers.scss */
.divider-1 {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-width: 1px 0 0 0;
}

/* line 39, ../src/pivotal-ui/components/dividers.scss */
.divider-2 {
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-width: 3px 0 0 0;
}

/* line 44, ../src/pivotal-ui/components/dividers.scss */
.divider-alternate-2,
.divider-2 {
  margin: 4vw 0;
}

/*doc
---
title: Dividers
name: divider_react
categories:
  - Beta
---

Dividers draw horizontal lines between different content groupings.

```react_example_table
<UI.Divider />

<UI.Divider size="large" />
```

On a dark background, use these inverse dividers

```react_example_table
<div className='contrast-bar'>
  <UI.InverseDivider />
</div>

<div className='contrast-bar'>
  <UI.InverseDivider size='large' />
</div>
```
*/
/*doc
---
title: Lists
name: list
categories:
  - Elements
  - All
---

This section contains different list styles.
*/
/*pending
---
title: JS Lists
name: lists_js
categories:
  - Objects
  - All
---

This section contains different list behaviors. See [lists][list] to see different list styles.
*/
/*doc
---
title: Inline
name: list_inline
parent: list
---

An inline list is one of the three methods for laying out content (including grids and the media block).

```html_example
<ul class="list-inline">
  <li>
    feep
  </li>
  <li>
    fop
  </li>
  <li>
    meep
  </li>
</ul>
```

You can use inline lists to lay out elements. Here's an example of a header next to a button:

```html_example
<ul class="list-inline lhxl">
  <li class="txt-m">
    <h5 class="em-alt em-max">Bound Services</h5>
  </li>
  <li class="txt-m">
    <a class="btn btn-default" target="_blank">Add from Marketplace</a>
  </li>
</ul>
```

*/
/* line 64, ../src/pivotal-ui/components/lists.scss */
.list-inline, .list-inline-divider, .list-breadcrumb, .list-vertical-divider, .list-vertical-divider-2, .list-steps {
  font-size: 0;
}
/* line 66, ../src/pivotal-ui/components/lists.scss */
.list-inline > li, .list-inline-divider > li, .list-breadcrumb > li, .list-vertical-divider > li, .list-vertical-divider-2 > li, .list-steps > li {
  font-size: 16px;
}

/*doc
---
title: Ordered
name: list_ordered
parent: list
---


```html_example
<ol>
  <li>
    feep
  </li>
  <li>
    fop
  </li>
  <li>
    meep
  </li>
</ol>
```

*/
/*doc
---
title: Unordered
name: list_unordered
parent: list
---

```html_example
<ul class="list-unordered">
  <li>
    feep
  </li>
  <li>
    fop
  </li>
  <li>
    meep
  </li>
</ul>
```

*/
/* line 118, ../src/pivotal-ui/components/lists.scss */
.list-unordered {
  padding-left: 0;
}
/* line 120, ../src/pivotal-ui/components/lists.scss */
.list-unordered > li {
  margin-left: 17px;
}

/*doc
---
title: Unstyled
name: list_unstyled
parent: list
---

Places all list items on a single line with `display: inline-block;` and some light padding. The `.list-unstyled` class can be applied to either a `<ul>` or and `<ol>`.

```html_example
<ul class="list-unstyled">
  <li>
    feep
  </li>
  <li>
    fop
  </li>
  <li>
    meep
  </li>
</ul>
```

*/
/*doc
---
title: Inline Divider
name: list_inline_divider
parent: list
---

Places all list items on a single line with `display: inline-block;` and some light padding. The `.list-inline-divider`
also adds a simple gray border (add `.list-inline-divider-light` to make the border white).

```html_example
<ul class="list-inline-divider">
  <li><a class="type-em-1" href="http://google.com">Edit</a></li>
  <li><a class="type-em-1" href="http://google.com">Invite</a></li>
</ul>
```

Here's the same example on a dark background:

```html_example
<div class="contrast-bar">
  <ul class="list-inline-divider list-inline-divider-light">
    <li><a class="type-em-1" href="http://google.com">Edit</a></li>
    <li><a class="type-em-1" href="http://google.com">Invite</a></li>
  </ul>
</div>
```

*/
/* line 181, ../src/pivotal-ui/components/lists.scss */
.list-inline-divider > li {
  line-height: 1em;
}
/* line 185, ../src/pivotal-ui/components/lists.scss */
.list-inline-divider > li:not(:first-child) {
  border-left: 1px solid #b4b4b4;
}

/* line 181, ../src/pivotal-ui/components/lists.scss */
.list-inline-divider-light > li {
  line-height: 1em;
}
/* line 185, ../src/pivotal-ui/components/lists.scss */
.list-inline-divider-light > li:not(:first-child) {
  border-left: 1px solid #c3c5c7;
}

/*doc
---
title: Breadcrumb
name: list_breadcrumb
parent: list
---

The `.list-breadcrumb` can be used to provide additional page navigation.

Breadcrumbs use their own monospace font-family.

```html_example
<ul class="list-breadcrumb">
  <li>
    <a href="http://google.com">Parent</a>
  </li>
  <li>
    <a href="http://google.com">Child</a>
  </li>
  <li class="current">
    <span>Current Page</span>
  </li>
</ul>
```
*/
/* line 226, ../src/pivotal-ui/components/lists.scss */
.list-breadcrumb {
  margin-bottom: 0;
  font-family: "Consolas", "Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
}
/* line 232, ../src/pivotal-ui/components/lists.scss */
.list-breadcrumb > li {
  font-size: 0;
  padding-left: 0;
  padding-right: 0;
}
/* line 234, ../src/pivotal-ui/components/lists.scss */
.list-breadcrumb > li a, .list-breadcrumb > li.current span {
  font-size: 14px;
  display: inline-block;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  vertical-align: middle;
}
/* line 242, ../src/pivotal-ui/components/lists.scss */
.list-breadcrumb > li.current span {
  color: #9faaad;
}
/* line 248, ../src/pivotal-ui/components/lists.scss */
.list-breadcrumb > li:before {
  font-size: 16px;
  color: #9faaad;
  content: ">";
  vertical-align: middle;
  padding-right: 5px;
  padding-left: 5px;
}
/* line 256, ../src/pivotal-ui/components/lists.scss */
.list-breadcrumb > li:first-child:before {
  content: "";
}

/*doc
---
title: Group
name: list_group
parent: list
---

Use this list when you need simple gray borders between items

```html_example
<ul class="list-group">
  <li class="list-group-item">
    item 1
  </li>
  <li class="list-group-item">
    item 2
  </li>
  <li class="list-group-item">
    item 3
  </li>
</ul>
```

Group lists are great for displaying lists of events
Here's an example from Console:

```html_example
<ul class="list-group">
  <li class="list-group-item pln">
    <div class="media">
      <div class="media-left media-middle phxxl">
        <i class="fa-exclamation-circle type-error-3 fa h2 man"></i>
      </div>
      <div class="media-body pbn">
        <div class="type-neutral-2 mbs">
          app crashed
        </div>
        <div class="type-neutral-4 small">
          <span>user@example.com</span>
          <span>11/14/2014 at 4:00 PM UTC</span>
        </div>
      </div>
    </div>
  </li>

  <li class="list-group-item pln">
    <div class="media">
      <div class="media-left media-middle phxxl">
        <i class="fa-stop type-neutral-5 fa h2 man"></i>
      </div>
      <div class="media-body pbn">
        <div class="type-neutral-2 mbs">
          stopped app
        </div>
        <div class="type-neutral-4 small">
          <span>user@example.com</span>
          <span>11/14/2014 at 3:00 PM UTC</span>
        </div>
      </div>
    </div>
  </li>

  <li class="list-group-item pln">
    <div class="media">
      <div class="media-left media-middle phxxl">
        <i class="fa-play type-brand-3 fa h2 man"></i>
      </div>
      <div class="media-body pbn">
        <div class="type-neutral-2 mbs">
          started app
        </div>
        <div class="type-neutral-4 small">
          <span>user@example.com</span>
          <span>11/14/2014 at 2:00 PM UTC</span>
        </div>
      </div>
    </div>
  </li>
</ul>
```
*/
/*pending
---
title: Addable
name: list_addable
parent: lists_js
---

New elements fade in

```html_example
<ul class="list-group" id="list-group-adding-demo">
  <li class="list-group-item">
    item 1
  </li>
  <li class="list-group-item">
    item 2
  </li>
  <li class="list-group-item">
    item 3
  </li>
</ul>

<a data-add-item-to="#list-group-adding-demo">Add an item</a>
```


*/
/* line 373, ../src/pivotal-ui/components/lists.scss */
.list-group, .list-group > li {
  border-width: 1px 0;
}

/* line 378, ../src/pivotal-ui/components/lists.scss */
.list-group-item {
  padding-right: 5px;
}
/* line 381, ../src/pivotal-ui/components/lists.scss */
.list-group-item.new {
  -webkit-animation: new-list-group-item-grow 0.3s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards, new-list-group-item-fade 0.5s ease-in 0.15s forwards;
  -moz-animation: new-list-group-item-grow 0.3s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards, new-list-group-item-fade 0.5s ease-in 0.15s forwards;
}

@-webkit-keyframes new-list-group-item-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes new-list-group-item-grow {
  0% {
    max-height: 0;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  100% {
    max-height: 100px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
@keyframes new-list-group-item-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes new-list-group-item-grow {
  from {
    max-height: 0;
    padding: 0px 15px;
  }
  to {
    max-height: 100px;
    padding: 10px 15px;
  }
}
/* line 430, ../src/pivotal-ui/components/lists.scss */
.list-notitle li:first-child {
  border-top: 0;
}
/* line 433, ../src/pivotal-ui/components/lists.scss */
.list-notitle li:last-child {
  border-bottom: 0;
}

/*doc
---
title: Event List
name: list_event
parent: console
---

This is a special list-group, with styles per-event for colors and icons.

<div class="alert alert-danger mbxl">
  <h5 class="em-high mtn">
    Deprecation warning
  </h5>
  <p>
    This component is deprecated.
    To create this component, use a <a class="alert-link" href="/elements.html#list_group">list group</a>.
  </p>
</div>

```html_example
<ul class="list-group event-list">
  <li class="list-group-item started">
    <div class="media">
      <div class="media-left media-middle">
        <div class="event-icon"></div>
      </div>
      <div class="media-body">
        <div class="event-title">started app</div>
        <span class="event-user">user@example.com</span>
        <span class="event-timestamp">11/14/2014 at 03:05 PM UTC</span>
      </div>
    </div>
  </li>
  <li class="list-group-item stopped">
    <div class="media">
      <div class="media-left media-middle">
        <div class="event-icon"></div>
      </div>
      <div class="media-body">
        <div class="event-title">stopped app</div>
        <span class="event-user">user@example.com</span>
        <span class="event-timestamp">11/14/2014 at 03:05 PM UTC</span>
      </div>
    </div>
  </li>
  <li class="list-group-item updated">
    <div class="media">
      <div class="media-left media-middle">
        <div class="event-icon"></div>
      </div>
      <div class="media-body">
        <div class="event-title">updated app</div>
        <span class="event-user">user@example.com</span>
        <span class="event-timestamp">11/14/2014 at 03:05 PM UTC</span>
      </div>
    </div>
  </li>
  <li class="list-group-item scaled">
    <div class="media">
      <div class="media-left media-middle">
        <div class="event-icon"></div>
      </div>
      <div class="media-body">
        <div class="event-title">scaled app</div>
        <span class="event-user">user@example.com</span>
        <span class="event-timestamp">11/14/2014 at 03:05 PM UTC</span>
      </div>
    </div>
  </li>
  <li class="list-group-item crashed">
    <div class="media">
      <div class="media-left media-middle">
        <div class="event-icon"></div>
      </div>
      <div class="media-body">
        <div class="event-title">app crashed</div>
        <span class="event-user">user@example.com</span>
        <span class="event-timestamp">11/14/2014 at 03:05 PM UTC</span>
      </div>
    </div>
  </li>
  <li class="list-group-item created">
    <div class="media">
      <div class="media-left media-middle">
        <div class="event-icon"></div>
      </div>
      <div class="media-body">
        <div class="event-title">created app</div>
        <span class="event-user">user@example.com</span>
        <span class="event-timestamp">11/14/2014 at 03:05 PM UTC</span>
      </div>
    </div>
  </li>
  <li class="list-group-item renamed phn">
    <div class="media">
      <div class="media-left media-middle">
        <div class="event-icon"></div>
      </div>
      <div class="media-body">
        <div class="event-title">renamed app</div>
        <span class="event-user">user@example.com</span>
        <span class="event-timestamp">11/14/2014 at 03:05 PM UTC</span>
      </div>
    </div>
  </li>
</ul>
```
*/
/* line 548, ../src/pivotal-ui/components/lists.scss */
.event-list .list-group-item {
  padding-left: 0;
  padding-right: 0;
}
/* line 553, ../src/pivotal-ui/components/lists.scss */
.event-list .media-left {
  padding-left: 0;
  padding-right: 0;
}
/* line 558, ../src/pivotal-ui/components/lists.scss */
.event-list .event-title {
  margin-bottom: 2px;
  color: #424242;
}
/* line 563, ../src/pivotal-ui/components/lists.scss */
.event-list .event-user, .event-list .event-timestamp {
  color: #8d8e8e;
  font-size: 13px;
}
/* line 568, ../src/pivotal-ui/components/lists.scss */
.event-list .event-icon {
  font-family: 'FontAwesome';
  font-size: 22px;
  width: 90px;
  text-align: center;
}
/* line 576, ../src/pivotal-ui/components/lists.scss */
.event-list .started .event-icon:after {
  color: #00a79d;
  content: '\f04b';
}
/* line 582, ../src/pivotal-ui/components/lists.scss */
.event-list .stopped .event-icon:after {
  color: #b4b4b4;
  content: '\f04d';
}
/* line 588, ../src/pivotal-ui/components/lists.scss */
.event-list .updated .event-icon:after {
  color: #00a79d;
  content: '\f01b';
}
/* line 594, ../src/pivotal-ui/components/lists.scss */
.event-list .scaled .event-icon:after {
  color: #00a79d;
  content: '\f0e4';
}
/* line 601, ../src/pivotal-ui/components/lists.scss */
.event-list .crashed .event-icon:after {
  color: #ff434c;
  content: '\f06a';
}
/* line 608, ../src/pivotal-ui/components/lists.scss */
.event-list .created .event-icon:after {
  color: #00a79d;
  content: '\f135';
}
/* line 615, ../src/pivotal-ui/components/lists.scss */
.event-list .renamed .event-icon:after {
  color: #00a79d;
  content: '\f040';
}

/*doc
---
title: Vertical Divider
name: list_vertical_divider
parent: list
---

Use this list when you need larger gray borders between
items. It should be used in concert with grid column
sizes when you want the items to take a particular width.

We achieve equal height columns using the padding/margin hack,
so we need an additional `.height-enforcer` element to get the
right min-height.

```html_example
<ul class="list-vertical-divider">
  <li class="col-md-8">
    <div class="height-enforcer">
      item 1
    </div>
  </li>
  <li class="col-md-8">
    <div class="height-enforcer">
      item 2
    </div>
  </li>
  <li class="col-md-8">
    <div class="height-enforcer" style="height: 200px">
      item 3, which is taller
    </div>
  </li>
</ul>
```

```html_example
<ul class="list-vertical-divider-2">
  <li class="col-md-8">
    <div class="height-enforcer">
      item 1
    </div>
  </li>
  <li class="col-md-8">
    <div class="height-enforcer">
      item 2
    </div>
  </li>
  <li class="col-md-8">
    <div class="height-enforcer" style="height: 200px">
      item 3, which is taller
    </div>
  </li>
</ul>
```

*/
/* line 680, ../src/pivotal-ui/components/lists.scss */
.list-vertical-divider, .list-vertical-divider-2 {
  zoom: 1;
  overflow: hidden;
}
/* line 34, ../src/oocss/utils/_clearfix-me.scss */
.list-vertical-divider:before, .list-vertical-divider-2:before, .list-vertical-divider:after, .list-vertical-divider-2:after {
  content: " ";
  display: table;
}
/* line 39, ../src/oocss/utils/_clearfix-me.scss */
.list-vertical-divider:after, .list-vertical-divider-2:after {
  clear: both;
}
/* line 686, ../src/pivotal-ui/components/lists.scss */
.list-vertical-divider > li, .list-vertical-divider-2 > li {
  border-left: 2px solid #ecefef;
  padding-bottom: 9000px;
  margin-bottom: -9000px;
}
/* line 687, ../src/pivotal-ui/components/lists.scss */
.list-vertical-divider > li:first-child, .list-vertical-divider-2 > li:first-child {
  border-left: none;
}
/* line 694, ../src/pivotal-ui/components/lists.scss */
.list-vertical-divider > li .height-enforcer, .list-vertical-divider-2 > li .height-enforcer {
  min-height: 130px;
}

/* line 700, ../src/pivotal-ui/components/lists.scss */
.list-vertical-divider-2 {
  margin-bottom: 40px;
}
/* line 703, ../src/pivotal-ui/components/lists.scss */
.list-vertical-divider-2 > li {
  border-left: 1px solid #e0e4e5;
  padding-left: 30px;
  padding-right: 30px;
}
/* line 708, ../src/pivotal-ui/components/lists.scss */
.list-vertical-divider-2 > li:first-child {
  padding-left: 30px;
}

/*doc
---
title: Steps
name: list_steps
parent: list
---

Use this list when you need to show the steps in a flow.

```html_example
<ol class="list-steps">
  <li>
    Sign up Account
  </li>
  <li class="current">
    Create Organization
  </li>
  <li>
    Do other things
  </li>
  <li>
    And more things
  </li>
</ol>
```

*/
/* line 743, ../src/pivotal-ui/components/lists.scss */
.list-steps > li {
  font-size: 14px;
  text-transform: uppercase;
  color: #b4b4b4;
  margin-right: 45px;
  padding-left: 0;
  margin-bottom: 5px;
  counter-increment: list-steps;
  font-weight: 600;
}
/* line 752, ../src/pivotal-ui/components/lists.scss */
.list-steps > li:before {
  content: counter(list-steps);
  display: block;
  padding: 0px 7px;
  margin-right: 4px;
  text-align: center;
  color: #b4b4b4;
  display: inline-block;
  border: 2px solid #b4b4b4;
  border-radius: 30px;
}
/* line 764, ../src/pivotal-ui/components/lists.scss */
.list-steps > li.current {
  color: #F8F8F8;
  font-weight: 900;
}
/* line 767, ../src/pivotal-ui/components/lists.scss */
.list-steps > li.current:before {
  color: #F8F8F8;
  border-color: #F8F8F8;
}

/*doc
---
title: Checked
name: list_checked
parent: list
---

Replaces the default bullet image with the font awesome checkmark.

```html_example
<ul class="list-checked">
  <li>
    feep
  </li>
  <li>
    fop
  </li>
  <li>
    meep
  </li>
</ul>
```

*/
/* line 803, ../src/pivotal-ui/components/lists.scss */
.list-checked {
  list-style: none;
  padding-left: 20px;
}
/* line 807, ../src/pivotal-ui/components/lists.scss */
.list-checked > li:before {
  font-family: 'FontAwesome';
  content: '\f00c';
  margin: 0 5px 0 -15px;
  color: #00776d;
}

/* build list spacing exceptions */
/* line 61, ../src/oocss/list/_listWhitespace.scss */
.lvn > li {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* line 61, ../src/oocss/list/_listWhitespace.scss */
.lvs > li {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

/* line 61, ../src/oocss/list/_listWhitespace.scss */
.lvm > li {
  margin-top: 7px !important;
  margin-bottom: 7px !important;
}

/* line 61, ../src/oocss/list/_listWhitespace.scss */
.lvl > li {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

/* line 61, ../src/oocss/list/_listWhitespace.scss */
.lvxl > li {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

/* line 61, ../src/oocss/list/_listWhitespace.scss */
.lhn > li {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* line 61, ../src/oocss/list/_listWhitespace.scss */
.lhs > li {
  margin-left: 5px !important;
  margin-right: 5px !important;
}

/* line 61, ../src/oocss/list/_listWhitespace.scss */
.lhm > li {
  margin-left: 7px !important;
  margin-right: 7px !important;
}

/* line 61, ../src/oocss/list/_listWhitespace.scss */
.lhl > li {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

/* line 61, ../src/oocss/list/_listWhitespace.scss */
.lhxl > li {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

/* line 70, ../src/oocss/list/_listWhitespace.scss */
ul[class*="lh"] > li:last-child {
  margin-right: 0 !important;
}

/* line 74, ../src/oocss/list/_listWhitespace.scss */
ul[class*="lh"] > li {
  margin-left: 0 !important;
}

/* line 78, ../src/oocss/list/_listWhitespace.scss */
ul[class*="lv"] > li:last-child {
  margin-bottom: 0 !important;
}

/* line 82, ../src/oocss/list/_listWhitespace.scss */
ul[class*="lv"] > li {
  margin-top: 0 !important;
}

/*doc
---
title: Cards
name: list_cards
parent: list
---

As the browser width changes, list-cards fill in one after another. There are two card types, `type-card-1` and
`type-card-2`. For this example, we've set both of them to stack on mobile sized screens.

```html_example_table
<ul class="list-cards list-card-1 list-cards-xs">
  <li class="bg-neutral-7">
    <p>list-card-1</p>
  </li>
</ul>

<ul class="list-cards list-card-2 list-cards-xs">
  <li class="bg-neutral-7">
    <p>list-card-2</p>
  </li>
</ul>
```

You can specify the breakpoint in which the cards stack by using the `list-card-*` classes. If the breakpoint is not
specified, the cards fill 100% of the `list-cards` width.


List Card Breakpoints | Class Names
--------------------- | ---------------
extra-small           | `.list-card-xs`
small                 | `.list-card-sm`
medium                | `.list-card-md`
large                 | `.list-card-lg`
extra-large           | `.list-card-xl`

<div class="alert alert-info mbxl">
  <p class="em-high">The cards list should only be used in fully liquid layouts, otherwise grids are a better choice.</p>
</div>

This is an example of a card list with the `list-cards-xs` stack point applied.
Resize the browser to see how cards stack on desktop sizes and expand on mobile sizes.

```html_example
<ul class="list-cards list-card-2 list-cards-xs">
  <li class="bg-neutral-7">
    <p>lorem ipsum 1</p>
  </li>
  <li class="bg-neutral-7">
    <p>lorem ipsum 2</p>
  </li>
  <li class="bg-neutral-7">
    <p>lorem ipsum 3</p>
  </li>
  <li class="bg-neutral-7">
    <p>lorem ipsum 4</p>
  </li>
  <li class="bg-neutral-7">
    <p>lorem ipsum 5</p>
  </li>
  <li class="bg-neutral-7">
    <p>lorem ipsum 6</p>
  </li>
  <li class="bg-neutral-7">
    <p>lorem ipsum 7</p>
  </li>
  <li class="bg-neutral-7">
    <p>lorem ipsum 8</p>
  </li>
</ul>
```
If you would like custom card dimensions, in your sass include the makeCard mixin, like so: `@include makeCard(height, width, name);`
You can then access the class via `.list-card-name`.

<h3 class="styleguide">Clickable List Cards</h3>

If you want your list cards to function as links (i.e. be clickable),
wrap all the inner content in `a` with class `list-card-link`.

```html_example
<ul class="list-cards list-card-1 list-cards-xs">
  <li class="bg-neutral-7">
    <a class="list-card-link" href="http://bit.ly/1sEyvH5">
      <p>This entire list card is clickable!</p>
    </a>
  </li>
  <li class="bg-neutral-7">
    <a class="list-card-link" href="http://bit.ly/1sFaArX">
      <p>This entire list card is clickable as well!</p>
    </a>
  </li>
</ul>
```
*/
/* line 916, ../src/pivotal-ui/components/lists.scss */
.list-cards {
  zoom: 1;
}
/* line 34, ../src/oocss/utils/_clearfix-me.scss */
.list-cards:before, .list-cards:after {
  content: " ";
  display: table;
}
/* line 39, ../src/oocss/utils/_clearfix-me.scss */
.list-cards:after {
  clear: both;
}
/* line 920, ../src/pivotal-ui/components/lists.scss */
.list-cards > li {
  margin-bottom: 20px;
}

@media (min-width: 480px) {
  /* line 930, ../src/pivotal-ui/components/lists.scss */
  .list-card-1.list-cards-xs > li {
    width: 435px;
    float: left;
    margin-right: 20px;
  }
}
@media (min-width: 768px) {
  /* line 930, ../src/pivotal-ui/components/lists.scss */
  .list-card-1.list-cards-sm > li {
    width: 435px;
    float: left;
    margin-right: 20px;
  }
}
@media (min-width: 992px) {
  /* line 930, ../src/pivotal-ui/components/lists.scss */
  .list-card-1.list-cards-md > li {
    width: 435px;
    float: left;
    margin-right: 20px;
  }
}
@media (min-width: 1200px) {
  /* line 930, ../src/pivotal-ui/components/lists.scss */
  .list-card-1.list-cards-lg > li {
    width: 435px;
    float: left;
    margin-right: 20px;
  }
}
@media (min-width: 1800px) {
  /* line 930, ../src/pivotal-ui/components/lists.scss */
  .list-card-1.list-cards-xl > li {
    width: 435px;
    float: left;
    margin-right: 20px;
  }
}
/* line 943, ../src/pivotal-ui/components/lists.scss */
.list-card-1 > li {
  min-height: 126px;
}
/* line 946, ../src/pivotal-ui/components/lists.scss */
.list-card-1 > li a.list-cards-link,
.list-card-1 > li a.list-card-link {
  display: block;
  min-height: 126px;
}
/* line 952, ../src/pivotal-ui/components/lists.scss */
.list-card-1 > li .list-card-wrapper {
  min-height: 126px;
}

@media (min-width: 480px) {
  /* line 930, ../src/pivotal-ui/components/lists.scss */
  .list-card-2.list-cards-xs > li {
    width: 284px;
    float: left;
    margin-right: 20px;
  }
}
@media (min-width: 768px) {
  /* line 930, ../src/pivotal-ui/components/lists.scss */
  .list-card-2.list-cards-sm > li {
    width: 284px;
    float: left;
    margin-right: 20px;
  }
}
@media (min-width: 992px) {
  /* line 930, ../src/pivotal-ui/components/lists.scss */
  .list-card-2.list-cards-md > li {
    width: 284px;
    float: left;
    margin-right: 20px;
  }
}
@media (min-width: 1200px) {
  /* line 930, ../src/pivotal-ui/components/lists.scss */
  .list-card-2.list-cards-lg > li {
    width: 284px;
    float: left;
    margin-right: 20px;
  }
}
@media (min-width: 1800px) {
  /* line 930, ../src/pivotal-ui/components/lists.scss */
  .list-card-2.list-cards-xl > li {
    width: 284px;
    float: left;
    margin-right: 20px;
  }
}
/* line 943, ../src/pivotal-ui/components/lists.scss */
.list-card-2 > li {
  min-height: 196px;
}
/* line 946, ../src/pivotal-ui/components/lists.scss */
.list-card-2 > li a.list-cards-link,
.list-card-2 > li a.list-card-link {
  display: block;
  min-height: 196px;
}
/* line 952, ../src/pivotal-ui/components/lists.scss */
.list-card-2 > li .list-card-wrapper {
  min-height: 196px;
}

/*doc
---
title: Layout Lists
name: layout_lists
categories:
  - Layout
  - All
---

Sometimes you might want to use lists to lay out elements on the page.

[Inline lists][list_inline] and [vertical divider lists][list_vertical_divider]
are particularly useful when you don't know the width of the element you want to layout,
or you want to vertically align it.

Use [Card lists][list_cards] if you'd like to make a grid of vertically and horizontally aligned cards.

*/
/*doc
---
title: React Draggable List
name: react_draggable_list
categories:
  - Beta
---

Creates a draggable list.

The property `onDrop` is a callback when a drop event has completed. Use this
if you need to make an API call to update the order of some elements.

```jsx_example
var draggableListDropCallback = function(data) {
  alert('New item indices order: ' + data);
};
```

```react_example
<UI.DraggableList onDrop={draggableListDropCallback}>
  <UI.DraggableListItem>
    Get me out of here!
  </UI.DraggableListItem>

  <UI.DraggableListItem>
    LOL
  </UI.DraggableListItem>

  <UI.DraggableListItem>
    Can't stop
  </UI.DraggableListItem>
</UI.DraggableList>
```
*/
/* line 1020, ../src/pivotal-ui/components/lists.scss */
.list-draggable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* line 1023, ../src/pivotal-ui/components/lists.scss */
.list-draggable .draggable-grip {
  display: inline-block;
  visibility: hidden;
  color: #c3c5c7;
}
/* line 1029, ../src/pivotal-ui/components/lists.scss */
.list-draggable > li {
  width: 100%;
}
/* line 1032, ../src/pivotal-ui/components/lists.scss */
.list-draggable > li.hover {
  cursor: pointer;
}
/* line 1035, ../src/pivotal-ui/components/lists.scss */
.list-draggable > li.hover .draggable-grip {
  visibility: visible;
}
/* line 1040, ../src/pivotal-ui/components/lists.scss */
.list-draggable > li.grabbed {
  background-color: #00a79d;
}
/* line 1042, ../src/pivotal-ui/components/lists.scss */
.list-draggable > li.grabbed * {
  visibility: hidden;
}
/* line 1047, ../src/pivotal-ui/components/lists.scss */
.list-draggable > li.grabbed .draggable-grip {
  visibility: hidden;
}

/*doc
---
title: Tabs
name: tab
categories:
  - Objects
  - All
---

You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-toggle="tab"` on an element.

*/
/*doc
---
title: Highlight
name: tab_highlight
parent: tab
---

```html_example
<div class="tab-highlight">
  <div class="row">
    <div class="col-md-8">
      <h1>Service Plans</h1>
      <ul class="nav nav-stacked">
        <li class="active">
          <a data-toggle="tab" href="#home">
            <div class="row">
              <div class="col-md-10 tab-title">Spark</div>
              <div class="col-md-14">Free</div>
            </div>
          </a>
        </li>
        <li>
          <a data-toggle="tab" href="#profile">
            <div class="row">
              <div class="col-md-10 tab-title">Boost</div>
              <div class="col-md-14">$10/month</div>
            </div>
          </a>
        </li>
        <li>
          <a data-toggle="tab" href="#messages">
            <div class="row">
              <div class="col-md-10 tab-title">Amp</div>
              <div class="col-md-14">$50/month</div>
            </div>
          </a>
        </li>
        <li>
          <a data-toggle="tab" href="#settings">
            <div class="row">
              <div class="col-md-10 tab-title">
                Shockingly long plan name is important to test
              </div>
              <div class="col-md-14">$1000/month</div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="col-md-16">
      <h1>Plan Features</h1>
      <div class="tab-content">
        <div class="tab-pane fade in active" id="home">Content 1</div>
        <div class="tab-pane fade" id="profile">Content 2</div>
        <div class="tab-pane fade" id="messages">Content 3</div>
        <div class="tab-pane fade" id="settings">Content 4</div>
      </div>
    </div>
  </div>
</div>
```

*/
/* line 80, ../src/pivotal-ui/components/tabs.scss */
.tab-highlight .nav > li {
  position: relative;
  overflow: hidden;
}
/* line 84, ../src/pivotal-ui/components/tabs.scss */
.tab-highlight .nav > li + li {
  margin-top: -2px;
}
/* line 88, ../src/pivotal-ui/components/tabs.scss */
.tab-highlight .nav > li > a {
  padding: 15px;
  color: #2185c5;
  background-color: #e0e4e5;
  transition: background-color 150ms ease-out;
}
/* line 95, ../src/pivotal-ui/components/tabs.scss */
.tab-highlight .nav > li > a:hover {
  z-index: 100;
  background-color: #ecefef;
}
/* line 102, ../src/pivotal-ui/components/tabs.scss */
.tab-highlight .nav > li.active a {
  z-index: 50;
}
/* line 106, ../src/pivotal-ui/components/tabs.scss */
.tab-highlight .nav > li.active > a,
.tab-highlight .nav > li.active > a:hover {
  color: #686868;
  background-color: #ecefef;
  border-width: 0;
  cursor: default;
}
/* line 115, ../src/pivotal-ui/components/tabs.scss */
.tab-highlight .nav .tab-title {
  font-size: 16px;
}
/* line 122, ../src/pivotal-ui/components/tabs.scss */
.tab-highlight .tab-content {
  border-top: 2px solid #ecefef;
  padding: 0;
  margin-left: -20px;
}

/*doc
---
title: Simple
name: tab_simple
parent: tab
---

```html_example
<div class="tab-simple">
  <div class="tabs-action txt-r">
    <a>Some Action</a>
  </div>
  <ul class="nav nav-tabs">
    <li class="active">
      <a data-toggle="tab" href="#spaces">Spaces</a>
    </li>
    <li>
      <a data-toggle="tab" href="#domains">Domains</a>
    </li>
    <li>
      <a data-toggle="tab" href="#members">Members</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade in active" id="spaces">Spaces Content</div>
    <div class="tab-pane fade" id="domains">Domains Content</div>
    <div class="tab-pane fade" id="members">Members Content</div>
  </div>
</div>
```

*/
/* line 163, ../src/pivotal-ui/components/tabs.scss */
.tab-simple {
  background-color: #e0e4e5;
  position: relative;
}
/* line 167, ../src/pivotal-ui/components/tabs.scss */
.tab-simple .nav.nav-tabs {
  border-bottom: 3px solid rgba(0, 0, 0, 0.07);
  border-top: 1px solid #e0e4e5;
  background-color: #ecefef;
  -moz-background-clip: padding;
  /* Firefox 3.6 */
  -webkit-background-clip: padding;
  /* Safari 4? Chrome 6? */
  background-clip: padding-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
}
/* line 174, ../src/pivotal-ui/components/tabs.scss */
.tab-simple .nav > li {
  border-right: 1px solid #e0e4e5;
}
/* line 176, ../src/pivotal-ui/components/tabs.scss */
.tab-simple .nav > li > a {
  margin-right: 0;
  border: 0;
  border-radius: 0;
  padding: 10px 19px 13px 19px;
  color: #2185c5;
  font-weight: 600;
  font-size: 16px;
}
/* line 186, ../src/pivotal-ui/components/tabs.scss */
.tab-simple .nav > li > a:hover {
  border: 0;
}
/* line 191, ../src/pivotal-ui/components/tabs.scss */
.tab-simple .nav > li:hover {
  cursor: pointer;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
/* line 195, ../src/pivotal-ui/components/tabs.scss */
.tab-simple .nav > li:hover > a {
  background-color: #F8F8F8;
}
/* line 200, ../src/pivotal-ui/components/tabs.scss */
.tab-simple .nav > li.active {
  margin-bottom: -3px;
  border-top: 3px solid rgba(0, 0, 0, 0.07);
  background-color: #e0e4e5;
  cursor: default;
  border-right: 0;
  -webkit-transition: all 0ms ease-out;
  -moz-transition: all 0ms ease-out;
  transition: all 0ms ease-out;
}
/* line 208, ../src/pivotal-ui/components/tabs.scss */
.tab-simple .nav > li.active > a {
  border: 0;
  margin: -3px 0 3px 0;
  color: #243640;
  background-color: transparent;
}
/* line 219, ../src/pivotal-ui/components/tabs.scss */
.tab-simple .tabs-action {
  padding: 14px 16px;
  position: absolute;
  right: 0;
}

/* line 226, ../src/pivotal-ui/components/tabs.scss */
.tab-content {
  padding: 20px;
}

/*doc
---
title: Simple Alt
name: tab_simple_alt
parent: tab
---

```html_example
<div class="tab-simple-alt">
  <ul class="nav nav-tabs">
    <li class="active">
      <a data-toggle="tab" href="#dashboard">Dashboard</a>
    </li>
    <li>
      <a data-toggle="tab" href="#notifications">Notifications</a>
    </li>
    <li>
      <a data-toggle="tab" href="#eula">EULA</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade in active" id="dashboard">Dashboard Content</div>
    <div class="tab-pane fade" id="notifications">Notifications Content</div>
    <div class="tab-pane fade" id="eula">EULA Content</div>
  </div>
</div>
```

*/
/* line 260, ../src/pivotal-ui/components/tabs.scss */
.tab-simple-alt {
  position: relative;
}
/* line 262, ../src/pivotal-ui/components/tabs.scss */
.tab-simple-alt .nav {
  border-bottom: none;
}
/* line 266, ../src/pivotal-ui/components/tabs.scss */
.tab-simple-alt .nav > li > a {
  margin-right: 0;
  border: 0;
  border-radius: 0;
  padding: 10px 19px 13px 19px;
  color: #2185c5;
  font-weight: 600;
  font-size: 16px;
}
/* line 275, ../src/pivotal-ui/components/tabs.scss */
.tab-simple-alt .nav > li > a:hover, .tab-simple-alt .nav > li > a:focus {
  border: 0;
}
/* line 279, ../src/pivotal-ui/components/tabs.scss */
.tab-simple-alt .nav > li:hover {
  cursor: pointer;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
/* line 282, ../src/pivotal-ui/components/tabs.scss */
.tab-simple-alt .nav > li:hover > a {
  background-color: #F8F8F8;
}
/* line 286, ../src/pivotal-ui/components/tabs.scss */
.tab-simple-alt .nav > li.active {
  background-color: white;
  cursor: default;
  border-right: 0;
  -webkit-transition: all 0ms ease-out;
  -moz-transition: all 0ms ease-out;
  transition: all 0ms ease-out;
}
/* line 291, ../src/pivotal-ui/components/tabs.scss */
.tab-simple-alt .nav > li.active > a {
  color: #243640;
  background-color: transparent;
}
/* line 297, ../src/pivotal-ui/components/tabs.scss */
.tab-simple-alt .tabs-action {
  padding: 14px 16px;
  position: absolute;
  right: 0;
}
/* line 302, ../src/pivotal-ui/components/tabs.scss */
.tab-simple-alt .tab-content {
  background-color: white;
}

/*doc
---
title: Responsive
name: tab_responsive
parent: tab
---

```html_example
<div class="tab-responsive">
  <div class="row">
    <div class="col-sm-5">
      <ul class="nav hidden-xs">
        <li class="active">
          <a data-toggle="tab" href="#tab-responsive-1">meep</a>
        </li>
        <li>
          <a data-toggle="tab" href="#tab-responsive-2">foo</a>
        </li>
        <li>
          <a data-toggle="tab" href="#tab-responsive-3">bar</a>
        </li>
        <li>
          <a data-toggle="tab" href="#tab-responsive-4">baz</a>
        </li>
      </ul>
    </div>

    <div class="col-sm-19">
      <ul class="tab-content">
        <li class="active">
          <a class="visible-xs-block" data-toggle="tab" href="#tab-responsive-1">meep</a>
        </li>
        <li class="tab-pane active fade in" id="tab-responsive-1">Content 1</li>
        <li>
          <a class="visible-xs-block" data-toggle="tab" href="#tab-responsive-2">foo</a>
        </li>
        <li class="tab-pane fade" id="tab-responsive-2">Content 2</li>
        <li>
          <a class="visible-xs-block" data-toggle="tab" href="#tab-responsive-3">foo</a>
        </li>
        <li class="tab-pane fade" id="tab-responsive-3">Content 3</li>
        <li>
          <a class="visible-xs-block" data-toggle="tab" href="#tab-responsive-4">foo</a>
        </li>
        <li class="tab-pane fade" id="tab-responsive-4">Content 4</li>
      </ul>
    </div>
  </div>
</div>
```

*/
/* line 365, ../src/pivotal-ui/components/tabs.scss */
.tab-responsive a[data-toggle="tab"] {
  padding: 8px 10px;
  color: #8d8e8e;
  margin: 5px 0;
  border-radius: 6px;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
/* line 373, ../src/pivotal-ui/components/tabs.scss */
.tab-responsive .active a[data-toggle="tab"],
.tab-responsive a[data-toggle="tab"]:hover,
.tab-responsive a[data-toggle="tab"]:focus {
  background-color: rgba(0, 0, 0, 0.035);
  color: #00a79d;
}
@media (max-width: 768px) {
  /* line 381, ../src/pivotal-ui/components/tabs.scss */
  .tab-responsive a[data-toggle="tab"] {
    background-color: rgba(0, 0, 0, 0.035);
    color: #00a79d;
  }
  /* line 386, ../src/pivotal-ui/components/tabs.scss */
  .tab-responsive .tab-pane {
    padding: 15px;
  }
}

/*doc
---
title: Image
name: tab_image
parent: tab
---

You can use any 130px by 130px svg for the icon in the center of the tab. Please add the class `icon` to any parts of the svg which form part of the icon. You may also use an icon font for the icon.

```html_example
<div class="tabs-images">
  <ul class="list-inline nav-tabs-images">
    <li class="active">
      <a data-toggle="tab" href="#agility">
        <span class="sr-only">Agility</span>
        <svg class="icon-svg" x="0px" y="0px" height="130" width="130" enable-background="new 0 0 130 130" >
          <g>
            <path class="icon" d="M97.283,83.157H86.452c-2.555,3.305-5.781,6.066-9.478,8.067h20.31l4.489-3.945L97.283,83.157z"/>
            <path class="icon" d="M62.788,38.586c-14.513,0-26.319,11.807-26.319,26.319c0,5.429,1.66,10.473,4.489,14.667h11.012
              c-4.499-3.327-7.434-8.654-7.434-14.667c0-10.064,8.188-18.252,18.252-18.252S81.04,54.84,81.04,64.905
              c0,6.013-2.935,11.34-7.434,14.667c-3.032,2.242-6.766,3.585-10.818,3.585H43.853h-4.729H28.292l4.482,4.122l-4.482,3.945h20.311
              h14.185c7.43,0,14.145-3.099,18.935-8.067c1.066-1.106,2.033-2.308,2.895-3.585c2.83-4.194,4.489-9.238,4.489-14.667
              C89.107,50.393,77.301,38.586,62.788,38.586z"/>
          </g>
        </svg>
      </a>
    </li>
    <li>
      <a data-toggle="tab" href="#choice">
        <span class="sr-only">Choice</span>
        <svg class="icon-svg" version="1.1" x="0px" y="0px"
             viewBox="0 0 130 130" enable-background="new 0 0 130 130" xml:space="preserve">
          <g>
            <g>
              <path class="icon" d="M59.642,57.905c0,1.65-1.35,3-3,3h-18c-1.65,0-3-1.35-3-3v-18c0-1.65,1.35-3,3-3h18c1.65,0,3,1.35,3,3V57.905z"/>
            </g>
            <g>
              <path class="icon" d="M78.381,60.905c-1.65,0-3.675-1.169-4.5-2.598l-3.928-6.804c-0.825-1.429-0.825-3.767,0-5.196l3.928-6.804
                c0.825-1.429,2.85-2.598,4.5-2.598h7.856c1.65,0,3.675,1.169,4.5,2.598l3.928,6.804c0.825,1.429,0.825,3.767,0,5.196l-3.928,6.804
                c-0.825,1.429-2.85,2.598-4.5,2.598H78.381z"/>
            </g>
            <circle class="icon" cx="82.309" cy="79.905" r="12"/>
            <g>
              <path class="icon" d="M46.202,70.399c0.792-1.372,2.088-1.372,2.88,0l3.77,6.531c0.792,1.372,2.088,3.616,2.88,4.988l3.77,6.531
                c0.792,1.372,0.144,2.494-1.44,2.494h-7.541c-1.584,0-4.175,0-5.759,0h-7.541c-1.584,0-2.232-1.122-1.44-2.494l3.77-6.531
                c0.792-1.372,2.088-3.616,2.88-4.988L46.202,70.399z"/>
            </g>
          </g>
        </svg>
      </a>
    </li>
    <li>
      <a data-toggle="tab" href="#open-source">
        <span class="sr-only">Open Source</span>
        <svg class="icon-svg" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 130 130" enable-background="new 0 0 130 130">
          <path class="icon" d="M95.22,65.454c0-16.583-13.441-30.025-30.024-30.025c-16.583,0-30.026,13.442-30.026,30.025
            c0,12.68,7.861,23.525,18.973,27.926l7.596-19.192c-3.477-1.377-5.937-4.767-5.937-8.734c0-5.188,4.207-9.393,9.394-9.393
            c5.188,0,9.395,4.206,9.395,9.393c0,3.966-2.463,7.357-5.937,8.734l7.594,19.192C87.362,88.979,95.22,78.134,95.22,65.454z"/>
        </svg>
      </a>
    </li>
  </ul>
  <div class="tab-content txt-c">
    <div class="tab-pane fade in active" id="agility">Agility Content</div>
    <div class="tab-pane fade" id="choice">Choice Content</div>
    <div class="tab-pane fade" id="open-source">Open Source</div>
  </div>
</div>

```
*/
/* line 467, ../src/pivotal-ui/components/tabs.scss */
.tabs-images .nav-tabs-images {
  text-align: center;
}
/* line 470, ../src/pivotal-ui/components/tabs.scss */
.tabs-images .nav-tabs-images li a[data-toggle=tab] {
  display: inline-block;
  width: 130px;
  height: 130px;
  margin: 0 30px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
  background-color: #e0e4e5;
  border-radius: 130px;
  transition: all 300ms ease;
  color: #b4b4b4;
}
/* line 59, ../src/pivotal-ui/components/mixins.scss */
.tabs-images .nav-tabs-images li a[data-toggle=tab]:hover, .tabs-images .nav-tabs-images li a[data-toggle=tab]:focus, .tabs-images .nav-tabs-images li a[data-toggle=tab]:active, .tabs-images .nav-tabs-images li a[data-toggle=tab].active {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14);
}
/* line 482, ../src/pivotal-ui/components/tabs.scss */
.tabs-images .nav-tabs-images li a[data-toggle=tab] .icon-svg .icon {
  fill: currentColor;
}
/* line 491, ../src/pivotal-ui/components/tabs.scss */
.tabs-images .nav-tabs-images li.active a, .tabs-images .nav-tabs-images li:hover a, .tabs-images .nav-tabs-images li:focus a, .tabs-images .nav-tabs-images li:active a {
  background-color: #00a79d;
  color: white;
}

/*doc
---
title: React Tabs
name: react_tabs
categories:
  - Beta
---

*/
/*doc
---
title: Simple Tabs
name: 01_react_simple_tabs
parent: react_tabs
---

```react_example
<UI.SimpleTabs defaultActiveKey={1}>
  <UI.Tab eventKey={1} tab="Tab 1">Wow!</UI.Tab>
  <UI.Tab eventKey={2} tab="Tab 2">
    <h2>Neat!</h2>
    <span>So much content.</span>
  </UI.Tab>
</UI.SimpleTabs>
```

*/
/*doc
---
title: React Alt Tabs
name: 02_react_alt_tabs
parent: react_tabs
---

```react_example
<UI.SimpleAltTabs defaultActiveKey={1}>
  <UI.Tab eventKey={1} tab="Tab 1">Wow!</UI.Tab>
  <UI.Tab eventKey={2} tab="Tab 2">
    <h2>Neat!</h2>
    <span>So much content.</span>
  </UI.Tab>
</UI.SimpleAltTabs>
```
*/
/*doc
---
title: Ellipsis
name: ellipsis
categories:
  - Utilities
  - All
---

The type `.type-ellipsis-1-line` adds ellipsis to text when there is too much. Combine it with `.col-md-*` classes to get the width you want.

```html_example_table
<p class="type-ellipsis-1-line">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p class="type-ellipsis-2-lines">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p class="type-ellipsis-3-lines">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
```


<div class="alert alert-info">
  <p class="em-high">
    Multi-line ellipsis only works on webkit.
  </p>
</div>

*/
/* line 35, ../src/pivotal-ui/components/ellipsis.scss */
.type-ellipsis-1-line {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

/* line 39, ../src/pivotal-ui/components/ellipsis.scss */
.type-ellipsis-2-lines,
.type-ellipsis-3-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* line 46, ../src/pivotal-ui/components/ellipsis.scss */
.type-ellipsis-3-lines {
  -webkit-line-clamp: 3;
}

/*doc
---
title: Accordions
name: accordion
categories:
  - Objects
  - All
---

These are frequently used in combination with our panel components. They have a header and body.

Accordions can be used with any background color class, add them to the header and body.

NOTE: The 'alligators' (the > in the HAML below) are structural --
without them, the browser renders the whitespace on the anchor tags,
and the images jump around by a few pixels when they're toggled.

Also see the select tabs for a toggle triggered by a select group.


*/
/*doc
---
title: Basic
name: accordion_basic
parent: accordion
---

Use this to expand and collapse content.

```html_example
<a class="collapsed" data-toggle="collapse" href="#simple-collapse-example">
  <div class="when-collapsed">
    Expand me
  </div>
  <div class="when-expanded">
    Collapse me
  </div>
</a>
<div class="collapse" id="simple-collapse-example">
  Look at this content.
</div>
```

*/
/*doc
---
title: Sizes
name: accordion_sizes
parent: accordion
---

Default accordion size:

```html_example
<div class="panel" id="accordion-1">
  <div class="panel-heading-accordion bg-neutral-11 collapse-trigger collapsed" data-toggle="collapse" data-parent="#accordion-2" href="#myCollapse-1">
    <div class="row">
      <div class="col-md-23">
        <h3 class="h5 collapse-title type-em-1 type-primary-2">My fancy application</h3>
      </div>
    </div>
  </div>
  <div class="panel-collapse collapse" id="myCollapse-1">
    <div class="panel-body-accordion bg-neutral-11">
      This content should hide and show when the trigger is clicked.
    </div>
  </div>
</div>

```

Large accordion size:

```html_example
<div class="panel" id="accordion-2">
  <div class="panel-heading-accordion-large bg-neutral-11 collapse-trigger collapsed" data-parent="#accordion-2" data-toggle="collapse" href="#myCollapse-2">
    <div class="row">
      <div class="col-md-23">
        <h3 class="h5 collapse-title type-em-1 type-primary-2">My fancy application</h3>
      </div>
    </div>
  </div>
  <div class="panel-collapse collapse" id="myCollapse-2">
    <div class="panel-body-accordion bg-neutral-11">
      This content should hide and show when the trigger is clicked.
    </div>
  </div>
</div>
```
*/
/*doc
---
title: With Icons
name: accordion_with_icons
parent: accordion
---

Accordion with plus/minus icon:

```html_example
<div class="panel" id="accordion-3">
  <div class="panel-heading-accordion-large collapse-trigger collapsed" data-parent="#accordion-2" data-toggle="collapse" href="#myCollapse-3">
    <div class="row">
      <div class="col-md-23">
        <a>
          <div class="when-collapsed-inline">
            <i class="fa fa-plus-square collapse-icon"></i>
          </div>
          <div class="when-expanded-inline">
            <i class="fa fa-minus-square collapse-icon"></i>
          </div>
        </a>
        <h3 class="h5 collapse-title type-em-1 type-primary-2">My fancy application</h3>
      </div>
    </div>
  </div>
  <div class="panel-collapse collapse" id="myCollapse-3">
    <div class="panel-body-accordion bg-neutral-11">
      This content should hide and show when the trigger is clicked.
    </div>
  </div>
</div>
```

Accordion with caret right/down icon:

```html_example
<div class="panel" id="accordion-4">
  <div class="panel-heading-accordion collapse-trigger collapsed" data-parent="#accordion-3" data-toggle="collapse" href="#myCollapse-4">
    <div class="row">
      <div class="col-md-23">
        <a>
          <div class="when-collapsed-inline">
            <i class="fa fa-caret-right collapse-icon"></i>
          </div>
          <div class="when-expanded-inline">
            <i class="fa fa-caret-down collapse-icon"></i>
          </div>
        </a>
        <h3 class="h5 collapse-title type-em-1 type-primary-2">My fancy application</h3>
      </div>
    </div>
  </div>
  <div class="panel-collapse collapse" id="myCollapse-4">
    <div class="panel-body-accordion bg-neutral-11">
      This content should hide and show when the trigger is clicked.
    </div>
  </div>
</div>
```
*/
/*doc
---
title: Styles
name: accordion_styles
parent: accordion
---

Accordion with Divider:

This adds a divider between the accordion header and accordion body.

```html_example
<div class="panel" id="accordion-5">
  <div class="panel-heading-accordion bg-neutral-11 collapse-trigger collapsed" data-parent="#accordion-3" data-toggle="collapse" href="#myCollapse-5">
    <div class="row">
      <div class="col-md-23">
        <a>
          <div class="when-collapsed-inline">
            <i class="fa fa-caret-right collapse-icon"></i>
          </div>
          <div class="when-expanded-inline">
            <i class="fa fa-caret-down collapse-icon"></i>
          </div>
        </a>
        <h3 class="h5 collapse-title type-em-1 type-primary-2">My fancy application</h3>
      </div>
    </div>
  </div>
  <div class="panel-collapse collapse" id="myCollapse-5">
    <div class="panel-body-accordion-divider bg-neutral-11">
      This content should hide and show when the trigger is clicked.
    </div>
  </div>
</div>
```

You can combine the accordion with any panel class to have a styled panel that opens and closes.

*/
/* line 198, ../src/pivotal-ui/components/collapse.scss */
.when-collapsed {
  display: none;
}

/* line 201, ../src/pivotal-ui/components/collapse.scss */
.when-expanded {
  display: block;
}

/* line 204, ../src/pivotal-ui/components/collapse.scss */
.when-collapsed-inline {
  display: none;
}

/* line 207, ../src/pivotal-ui/components/collapse.scss */
.when-expanded-inline {
  display: inline;
}

/* line 212, ../src/pivotal-ui/components/collapse.scss */
.collapsed .when-collapsed {
  display: block;
}
/* line 215, ../src/pivotal-ui/components/collapse.scss */
.collapsed .when-expanded {
  display: none;
}
/* line 218, ../src/pivotal-ui/components/collapse.scss */
.collapsed .when-collapsed-inline {
  display: inline;
}
/* line 221, ../src/pivotal-ui/components/collapse.scss */
.collapsed .when-expanded-inline {
  display: none;
}

/* line 227, ../src/pivotal-ui/components/collapse.scss */
.collapse-trigger {
  cursor: pointer;
}
/* line 230, ../src/pivotal-ui/components/collapse.scss */
.collapse-trigger .collapse-title {
  display: inline-block;
}
/* line 234, ../src/pivotal-ui/components/collapse.scss */
.collapse-trigger .collapse-icon {
  display: inline-block;
  width: 15px;
  color: #686868;
  margin-right: 5px;
}

/* line 242, ../src/pivotal-ui/components/collapse.scss */
.panel-heading-accordion, .panel-heading-accordion-large {
  position: relative;
  padding: 10px 20px;
  margin-bottom: 0px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* line 253, ../src/pivotal-ui/components/collapse.scss */
.panel-body-accordion, .panel-body-accordion-divider, .panel-divider > .panel-heading + .panel-collapse > .panel-body {
  margin: 0px;
  padding: 30px 20px;
}

/* line 258, ../src/pivotal-ui/components/collapse.scss */
.panel-heading-accordion-large {
  padding: 25px 20px 25px 20px;
}

/* line 263, ../src/pivotal-ui/components/collapse.scss */
.panel-body-accordion-divider, .panel-divider > .panel-heading + .panel-collapse > .panel-body {
  border-top: 2px solid rgba(0, 0, 0, 0.07);
}

/* line 270, ../src/pivotal-ui/components/collapse.scss */
.panel-title a {
  display: block;
}

/*doc
---
title: React Collapse
name: react_collapse
categories:
  - Beta
---

Rellapse

```react_example
<UI.BaseCollapse header="Panel 1">
  <p>Panel 1 content</p>
  <p>Panel 1 content</p>
  <p>Panel 1 content</p>
  <p>Panel 1 content</p>
  <p>Panel 1 content</p>
  <p>Panel 1 content</p>
  <p>Panel 1 content</p>
  <p>Panel 1 content</p>
  <p>Panel 1 content</p>
  <p>Panel 1 content</p>
</UI.BaseCollapse>
```

With icons

```react_example
<UI.Collapse header="With Arrows">
  <p>Content!</p>
  <p>Content!</p>
  <p>Content!</p>
  <p>Content!</p>
  <p>Content!</p>
</UI.Collapse>
```

```react_example
<UI.AltCollapse header="Without Arrows">
  <p>Content!</p>
  <p>Content!</p>
  <p>Content!</p>
  <p>Content!</p>
  <p>Content!</p>
</UI.AltCollapse>
```

With divider

```react_example
<UI.Collapse header="With Divider" divider>
  <p>Content!</p>
  <p>Content!</p>
  <p>Content!</p>
  <p>Content!</p>
  <p>Content!</p>
</UI.Collapse>
```

*/
/*doc
---
title: Introduction
name: 00_form_introduction
categories:
  - Forms
---

Individual form controls automatically receive some global styling.
All textual `<input>`, `<textarea>`, and `<select>` elements with
`.form-control` are set to `width: 100`%; by default.

<div class="alert alert-info">
  <p class="em-high">
    Wrap labels and controls in <code>.form-group</code> for optimum spacing.
  </p>
</div>

*/
/*doc
---
title: Basic Forms
name: 0a_form_basic
parent: 00_form_introduction
---

```html_example
<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
```

*/
/*doc
---
title: Inline Forms
name: form_inline
categories:
  - Forms
  - All
---

Add `.form-inline` to your `<form>` for left-aligned and inline-block controls.
This only applies to forms within viewports that are at least 768px wide.

<div class="alert alert-info">
  <h5 class="em-high mtn">
    Always add labels to every input.
  </h5>
  <p>
    Screen readers will have trouble with your forms if you don't.
    You can always hide the labels using the <code class="sg-code">.sr-only</code> class.
  </p>
</div>

```html_example
<form class="styleguide-form form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input class="form-control" id="exampleInputEmail2" placeholder="Enter email" type="email"></input>
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input class="form-control" id="exampleInputPassword2" placeholder="Password" type="password"></input>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"></input>
      Remember me
    </label>
  </div>
  <button class="btn btn-primary" type="submit">Sign in</button>
</form>
```
*/
/*doc
---
title: Inline Forms with Labels
name: form_inline_with_labels
parent: form_inline
---

Add `.form-inline.inline-labels` to your `<form>` for left-aligned and inline-block controls with labels inline with inputs.


```html_example
<form class="styleguide-form form-inline inline-labels" role="form">
  <div class="form-group">
    <label for="exampleInputEmail2">Write a thing</label>
    <input class="form-control" id="exampleInputEmail2" placeholder="Write a thing" type="email"></input>
  </div>
  <div class="form-group">
    <label for="exampleSelect">Choose a thing</label>
    <select class="form-control" id="exampleSelect">
      <option>thing</option>
    </select>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"></input>
      Remember me
    </label>
  </div>
  <button class="btn btn-primary" type="submit">Sign in</button>
</form>
```
*/
/*doc
---
title: Inputs & Labels
name: form_inputs
categories:
  - Forms
  - All
---

An input with the label top aligned (this is the default layout).

```html_example
<form class="styleguide-form" role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">
      <abbr title="required">*</abbr>
      Email address
    </label>
    <input aria-required="true" class="form-control" id="exampleInputEmail1" placeholder="Enter email" required="required" type="email"></input>
  </div>
</form>
```

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal
layout by adding `.form-horizontal` to the form. Doing so changes `.form-groups` to behave as grid rows, so no need for `.row`.

An input with the label left aligned

```html_example
<form class="styleguide-form form-horizontal" role="form">
  <div class="form-group">
    <div class="col-md-6">
      <label class="control-label" for="exampleInputEmail1">
        <abbr title="required">*</abbr>
        Email address
      </label>
    </div>
    <div class="col-md-18">
      <input aria-required="true" class="form-control" id="exampleInputEmail1" placeholder="Enter email" required="required" type="email"></input>
    </div>
  </div>
</form>
```

An input with the label right aligned (N.B., control-label class provides the right alignment):

```html_example
<form class="styleguide-form form-horizontal" role="form">
  <div class="form-group">
    <label class="col-md-6 control-label" for="exampleInputEmail1">
      <abbr title="required">*</abbr>
      Email address
    </label>
    <div class="col-md-18">
      <input aria-required="true" class="form-control" id="exampleInputEmail1" placeholder="Enter email" required="required" type="email"></input>
    </div>
  </div>
</form>
```

An unstyled inputs that doesn't have any of the default input styles

```html_example
<form role="form">
  <input class="unstyled" placeholder="This is a text input"></input>
</form>
```
*/
/*doc
---
title: HTML5 Controls
name: 01_form_html5_controls
parent: form_inputs
---

Examples of standard form controls supported in an example form layout.

Inputs
Most common form control, text-based input fields. Includes support for
all HTML5 types: `text`, `password`, `datetime`, `datetime-local`,
`date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`,
`tel`, and `color`.

<div class="alert alert-warning">
  <p class="em-high">
    Inputs will only be fully styled if their type is properly declared.
  </p>
</div>

```html_example
<form class="styleguide-form" role="form">
  <input class="form-control" placeholder="Text input" type="text"></input>
</form>
```

Password field

```html_example
<form class="styleguide-form" role="form">
  <input class="form-control" placeholder="Password" type="password"></input>
</form>
```

Date

```html_example
<form class="styleguide-form" role="form">
  <input class="form-control" placeholder="Date" type="date"></input>
</form>
```

Number

```html_example
<form class="styleguide-form" role="form">
  <input class="form-control" placeholder="Number" type="number"></input>
</form>
```

With a min/max and default starting value

```html_example
<form class="styleguide-form" role="form">
  <input class="form-control" placeholder="Number" type="number" min=0 max=2 value=1></input>
</form>
```

With a different increment value

```html_example
<form class="styleguide-form" role="form">
  <input class="form-control" placeholder="Number" type="number" step=5></input>
</form>
```

Email

Use this with fields that require email addresses to pop up the correct keyboard on mobile

```html_example
<form class="styleguide-form" role="form">
  <input class="form-control" placeholder="Email" type="email"></input>
</form>
```

URL

Use this with fields that require urls to pop up the correct keyboard on mobile

```html_example
<form class="styleguide-form" role="form">
  <input class="form-control" placeholder="URL" type="url"></input>
</form>
```

Telephone

Use this with fields that require telephone numbers to pop up the dialpad on mobile

```html_example
<form class="styleguide-form" role="form">
  <input class="form-control" placeholder="Telephone" type="tel"></input>
</form>
```
*/
/*doc
---
title: Sizing
name: 02_form_inputs_sizing
parent: form_inputs
---

Set heights using the form control classes `.input-lg` and `.input-sm`.
Create larger or smaller form controls that match button sizes.

```html_example_table
<input class="form-control input-lg" placeholder=".input-lg" type="text">

<input class="form-control" placeholder="Default Input" type="text">

<input class="form-control input-sm" placeholder=".input-sm" type="text">
```

Set widths using grid column classes like `.col-lg-*`.
Wrap selects in grid columns, or any custom parent element, to easily enforce desired widths.

```html_example
<form class="styleguide-form" role="form">
  <div class="row">
    <div class="col-md-4">
      <input class="form-control" placeholder=".col-xs-2" type="text"></input>
    </div>
    <div class="col-md-6">
      <input class="form-control" placeholder=".col-xs-3" type="text"></input>
    </div>
    <div class="col-md-8">
      <input class="form-control" placeholder=".col-xs-4" type="text"></input>
    </div>
  </div>
</form>
```

*/
/* line 333, ../src/pivotal-ui/components/forms.scss */
.form-group abbr {
  float: right;
  margin-left: 5px;
  border-bottom: 0;
}
/* line 339, ../src/pivotal-ui/components/forms.scss */
.form-group [class*="col"].control-label abbr {
  float: none;
  margin-right: 2px;
}

/* line 346, ../src/pivotal-ui/components/forms.scss */
.unstyled {
  background-color: transparent;
  outline: none;
  border: none;
}

/* line 352, ../src/pivotal-ui/components/forms.scss */
label {
  font-weight: 400;
  color: #686868;
}

/* line 358, ../src/pivotal-ui/components/forms.scss */
::-webkit-input-placeholder {
  font-weight: 400;
}

/* line 362, ../src/pivotal-ui/components/forms.scss */
:-moz-placeholder {
  /* Firefox 18- */
  font-weight: 400;
}

/* line 366, ../src/pivotal-ui/components/forms.scss */
::-moz-placeholder {
  /* Firefox 19+ */
  font-weight: 400;
}

/* line 370, ../src/pivotal-ui/components/forms.scss */
:-ms-input-placeholder {
  font-weight: 400;
}

/*pending
---
title: Fancy Number Inputs
name: 03_form_fancy_number
parent: form_inputs
---

This is a fancy number input!

```html_example
<form class="styleguide-form" role="form">
  <label>Instances</label>
  <div class="number-fancy">
    <input class="form-control" />
    <ul class="list-unstyled buttons">
      <li class="btn-plus">
        <i class="fa fa-plus"></i>
      </li>
      <li class="btn-minus">
        <i class="fa fa-minus"></i>
      </li>
    </ul>
  </div>
</form>


```
*/
/* line 403, ../src/pivotal-ui/components/forms.scss */
.number-fancy {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-right: 36px;
}
/* line 409, ../src/pivotal-ui/components/forms.scss */
.number-fancy .buttons {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
}
/* line 414, ../src/pivotal-ui/components/forms.scss */
.number-fancy .buttons li {
  -webkit-transition: all 150ms ease-out;
  -moz-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
  font-size: 12px;
  background-color: white;
  border: none;
  width: 30px;
  height: 50%;
  color: #a7c9e0;
  text-align: center;
  line-height: 20px;
}
/* line 424, ../src/pivotal-ui/components/forms.scss */
.number-fancy .buttons li:hover {
  color: #2185c5;
  background-color: #ecefef;
  cursor: pointer;
}
/* line 430, ../src/pivotal-ui/components/forms.scss */
.number-fancy .buttons li.btn-minus {
  border-bottom-right-radius: 4px;
}
/* line 434, ../src/pivotal-ui/components/forms.scss */
.number-fancy .buttons li.btn-plus {
  border-top-right-radius: 4px;
}
/* line 440, ../src/pivotal-ui/components/forms.scss */
.number-fancy input {
  height: 32px;
  margin: 5px;
  padding: 0 5px;
  display: inline;
  border-radius: 4px;
}
/* line 448, ../src/pivotal-ui/components/forms.scss */
.number-fancy input:hover {
  background-color: #ecefef;
}

/*doc
---
title: Search Inputs
name: 04_form_search_input
parent: form_inputs
---

Use this input when creating a search component.

```html_example
<div class="form-group form-group-search">
  <input class="form-control" placeholder="This is a searchbox">
  <i class="fa fa-search"></i>
</div>
```
*/
/* line 472, ../src/pivotal-ui/components/forms.scss */
.form-group-search {
  position: relative;
}
/* line 475, ../src/pivotal-ui/components/forms.scss */
.form-group-search i {
  position: absolute;
  left: 12px;
  top: 12px;
}
/* line 481, ../src/pivotal-ui/components/forms.scss */
.form-group-search input {
  padding-left: 34px;
}

/*doc
---
title: Read-Only Inputs
name: 05_form_inputs_read_only
parent: form_inputs
---

Add the `readonly` boolean attribute on an input to prevent user input and style the input as disabled.

```html_example
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
```

*/
/* line 501, ../src/pivotal-ui/components/forms.scss */
.form-control {
  box-shadow: none;
  padding: 8px 14px;
}

/* line 506, ../src/pivotal-ui/components/forms.scss */
.form-control[readonly] {
  background-color: #eeeeee;
}

/*doc
---
title: Selects
name: form_selects
categories:
  - Forms
  - All
---
Selects are excellent to use because they will automatically
behave as expected cross browser on different devices. Prefer
them over a custom dropdown whenever possible.

```html_example
<form class="styleguide-form" role="form">
  <select class="form-control">
    <option>default option</option>
    <option>an option</option>
    <option>another option</option>
  </select>
</form>
```
*/
/*doc
---
title: Sizing
name: 01_form_select_sizing
parent: form_selects
---

Set heights using the form control classes `.input-lg` and `.input-sm`.
Create larger or smaller form controls that match button sizes.

```html_example_table
<select class="form-control input-lg">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="form-control" Input">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="form-control input-sm">
  <option>Option 1</option>
  <option>Option 2</option>
</select>
```

Set widths using grid column classes like `.col-lg-*`.
Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

```html_example
<form class="styleguide-form" role="form">
  <div class="row">
    <div class="col-md-4">
      <input class="form-control" placeholder=".col-xs-2" type="text"></input>
    </div>
    <div class="col-md-6">
      <input class="form-control" placeholder=".col-xs-3" type="text"></input>
    </div>
    <div class="col-md-8">
      <input class="form-control" placeholder=".col-xs-4" type="text"></input>
    </div>
  </div>
</form>
```

*/
/*doc
---
title: Fancy Selects
name: 02_form_fancy_select
parent: form_selects
---

This is a fancy select!

```html_example
<form class="styleguide-form" role="form" style="width: 200px">
  <label for="fancy-select">Description</label>
  <div class="select-fancy">
    <select class="form-control">
      <option>Fancy Option 1</option>
      <option>Fancy Option 2</option>
    </select>
  </div>
</form>
```

*/
/* line 604, ../src/pivotal-ui/components/forms.scss */
.fancy-form-element, .number-fancy, .select-fancy {
  box-shadow: 0 3px 0 #d4d9d9;
  background-color: white;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  border-radius: 4px;
  position: relative;
}
/* line 611, ../src/pivotal-ui/components/forms.scss */
.fancy-form-element:hover, .number-fancy:hover, .select-fancy:hover {
  box-shadow: 0 3px 0 #b4b4b4;
  cursor: pointer;
}
/* line 616, ../src/pivotal-ui/components/forms.scss */
.fancy-form-element .form-control, .number-fancy .form-control, .select-fancy .form-control {
  border: none;
  box-shadow: none;
  background: transparent;
  background-image: none;
  -webkit-appearance: none;
  -webkit-transition: all 150ms ease-out;
  -moz-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
  font-size: 16px;
  font-weight: 900;
}
/* line 625, ../src/pivotal-ui/components/forms.scss */
.fancy-form-element .form-control.has-error, .number-fancy .form-control.has-error, .select-fancy .form-control.has-error {
  border-radius: 3px;
  border: 1px solid #ff434c;
}

/* line 632, ../src/pivotal-ui/components/forms.scss */
.fancy-form-element-disabled {
  font-size: 16px;
  font-weight: 900;
  height: 30px;
  margin-top: 7px;
  margin-left: 7px;
}

/* line 643, ../src/pivotal-ui/components/forms.scss */
.select-fancy:after {
  z-index: 2;
  content: "\f107";
  font-family: FontAwesome;
  position: absolute;
  right: 10px;
  top: 4px;
  font-size: 22px;
  color: #a7c9e0;
  -webkit-transition: all 150ms ease-out;
  -moz-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
}
/* line 656, ../src/pivotal-ui/components/forms.scss */
.select-fancy:hover:after, .select-fancy:hover select {
  color: #2185c5;
}
/* line 661, ../src/pivotal-ui/components/forms.scss */
.select-fancy select {
  -moz-appearance: window;
  position: relative;
  z-index: 3;
  padding: 5px 8px;
  width: 100%;
  cursor: pointer;
}
/* line 669, ../src/pivotal-ui/components/forms.scss */
.select-fancy select:focus {
  outline: none;
}
/* line 672, ../src/pivotal-ui/components/forms.scss */
.select-fancy input {
  height: 32px;
  margin: 5px;
  width: 75%;
  padding: 0 5px;
  display: inline;
  border-radius: 4px;
}
/* line 681, ../src/pivotal-ui/components/forms.scss */
.select-fancy input:hover {
  background-color: #ecefef;
}

/*doc
---
title: Text Areas
name: form_textarea
categories:
  - Forms
  - All
---

Text areas are used for larger amounts of input.

```html_example
<form class="styleguide-form" role="form">
  <div class="form-group">
    <label for="exampleTextAreaId">Description</label>
    <textarea class="form-control" id="exampleTextAreaId" rows="3"></textarea>
  </div>
</form>
```

*/
/*doc
---
title: Checkboxes & Radios
name: form_checkboxes
categories:
  - Forms
  - All
---
Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

### Default (stacked)

```html_example
<form class="styleguide-form" role="form">
  <div class="checkbox">
    <label>
      <input type="checkbox">
        Option one is this and that&mdash;be sure to include why it's great
      </input>
    </label>
  </div>
  <div class="radio">
    <label>
      <input id="optionsRadios1" name="optionsRadios" type="radio" value="option1" checked>
        Option one is this and that&mdash;be sure to include why it's great
      </input>
    </label>
  </div>
  <div class="radio">
    <label>
      <input id="optionsRadios2" name="optionsRadios" type="radio" value="option2">
        Option two can be something else and selecting it will deselect option one
      </input>
    </label>
  </div>
</form>
```

*/
/* line 749, ../src/pivotal-ui/components/forms.scss */
input[type="radio"] {
  margin-top: 2px;
}

/*doc
---
title: Inline Checkboxes & Radios
name: form_checkboxes_inline
parent: form_checkboxes
---

Use `.checkbox-inline` or `.radio-inline` class to a series of checkboxes or radios for controls appear on the same line.

```html_example
<form class="styleguide-form" role="form">
  <div class="form-group">
    <label class="checkbox-inline">
      <input id="inlineCheckbox1" type="checkbox" value="option1">
        1
      </input>
    </label>
    <label class="checkbox-inline">
      <input id="inlineCheckbox2" type="checkbox" value="option2">
        2
      </input>
    </label>
    <label class="checkbox-inline">
      <input id="inlineCheckbox3" type="checkbox" value="option3">
        3
      </input>
    </label>
  </div>
  <div class="form-group">
    <label class="radio-inline">
      <input id="inlineradio1" type="radio" value="option1">
        1
      </input>
    </label>
    <label class="radio-inline">
      <input id="inlineradio2" type="radio" value="option2">
        2
      </input>
    </label>
    <label class="radio-inline">
      <input id="inlineradio3" type="radio" value="option3">
        3
      </input>
    </label>
  </div>
</form>
```

*/
/* line 805, ../src/pivotal-ui/components/forms.scss */
.form-inline.inline-labels .form-group input, .form-inline.inline-labels .form-group select {
  width: auto !important;
}

/*doc
---
title: Help Text
name: form_help_text
categories:
  - Forms
  - All
---
Help text
Block level help text for form controls.

```html_example
<form class="styleguide-form" role="form">
  <input class="form-control" type="text"></input>
  <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>
```

*/
/*doc
---
title: Validations
name: form_validation
categories:
 - Forms
 - All
---

To show validation errors on a field, add `.has-error` to the field's form group.
This class can be used for all types of inputs.

Error messages should use the classes `.help-block.has-error`.

```html_example_table
<form class="styleguide-form" role="form">
  <div class="form-group has-error">
    <label class="control-label" for="inputError">
      Input with error
    </label>
    <input id="inputError" class="form-control" type="text">
    <span class="help-block has-error">
      Error help text
    </span>
  </div>
</form>

<form class="styleguide-form" role="form">
  <div class="form-group has-error">
    <div class="checkbox">
      <label class="control-label">
        <input type="checkbox" value="">
        Checkbox which needs to be checked
      </label>
      <span class="help-block has-error">
        Error help text
      </span>
    </div>
  </div>
</form>
```

If you're doing client-side validation and want to show successful validation of a field,
add `.has-success` to the field's form group.

<div class="alert alert-info mbxl">
  <p class="em-high">
    The <code>.has-success</code> class can only be used on inputs that have a text-box.
  </p>
</div>

```html_example_table
<form class="styleguide-form" role="form">
  <div class="form-group has-success">
    <label class="control-label" for="inputSuccess">
      Input with success
    </label>
    <input id="inputSuccess" class="form-control" type="text">
  </div>
</form>
```

*/
/* overrides bootstrap colors */
/* line 902, ../src/pivotal-ui/components/forms.scss */
.has-success {
  position: relative;
}
/* line 904, ../src/pivotal-ui/components/forms.scss */
.has-success:before {
  content: "\f00c";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 42px;
  width: 42px;
  line-height: 42px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  color: #00a79d;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  text-align: center;
}
/* line 897, ../src/pivotal-ui/components/forms.scss */
.has-success .control-label {
  color: #686868;
}

/* line 926, ../src/pivotal-ui/components/forms.scss */
.has-error .help-block, .has-error .help-inline {
  font-size: 14px;
}

/* line 932, ../src/pivotal-ui/components/forms.scss */
.radio,
.checkbox {
  padding-left: 20px;
}
/* line 936, ../src/pivotal-ui/components/forms.scss */
.radio label,
.checkbox label {
  padding-left: 0;
}

/*doc
---
title: Disabled Controls
name: form_disabled_controls
categories:
  - Forms
  - All
---

Controls will occasionally need to be disabled.
You can do that by adding the `disabled` attribute.
Inputs, selects, checkboxes, fieldsets, buttons, and other form controls can all be disabled.

```html_example_table
<input class="form-control" type="text" placeholder="Disabled input here" disabled>

<select class="form-control" disabled>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<label>
  <input type="checkbox" disabled>
  I'm disabled!
</label>

<button class="btn" disabled>
  Hi
</button>
```

*/
/* line 975, ../src/pivotal-ui/components/forms.scss */
.form-control:focus {
  box-shadow: none;
}

/*doc
---
title: Static Controls
name: form_static_control
categories:
  - Forms
  - All
---

When you need to place plain text next to a form label within a form,
use the `.form-control-static` class on a `<p>`.

Here's an example in a horizontal form:

```html_example
<form class="form-horizontal styleguide-form" role="form">
  <div class="form-group">
    <label class="col-md-4 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-4 control-label" for="inputPassword">Password</label>
    <div class="col-sm-10">
      <input class="form-control" id="inputPassword" placeholder="Password" type="password"></input>
    </div>
  </div>
</form>
```

Here's an example in a vertical form:

```html_example
<form class="styleguide-form" role="form">
  <div class="form-group">
    <label class="control-label">Email</label>
    <p class="form-control-static">someguy@test.com</p>
  </div>
  <div class="form-group">
    <label class="control-label" for="name">Name</label>
    <input class="form-control" id="name" placeholder="name"></input>
  </div>
</form>
```

*/
/* line 1027, ../src/pivotal-ui/components/forms.scss */
.help-inline {
  display: block;
  text-align: left;
  color: #febfc1;
  padding: 5px 0 0 16px;
  text-transform: capitalize;
}

/* line 71, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.input-sm {
  height: 27px;
  padding: 2px 10px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 3px;
}

/* line 79, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
select.input-sm {
  height: 27px;
  line-height: 27px;
}

/* line 84, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
textarea.input-sm,
select[multiple].input-sm {
  height: auto;
}

/* line 71, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
.input-lg {
  height: 48px;
  padding: 10px 26px;
  font-size: 19px;
  line-height: 1.33;
  border-radius: 3px;
}

/* line 79, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
select.input-lg {
  height: 48px;
  line-height: 48px;
}

/* line 84, ../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */
textarea.input-lg,
select[multiple].input-lg {
  height: auto;
}

/* line 1042, ../src/pivotal-ui/components/forms.scss */
p.form-control-static {
  color: #686868;
}

/*doc
---
title: Autoselect Text Inputs
name: form_autoselect_text_input
categories:
  - Forms
  - All
---

This form is used to show information that a user may wish to copy and paste somewhere.

```html_example
<input class="auto-select form-control" data-behavior="AutoSelect" readonly="readonly" value="This should auto highlight"></input>
```

*/
/* line 1063, ../src/pivotal-ui/components/forms.scss */
.form-control.auto-select {
  cursor: pointer;
}

/*pending
---
title: Content Editables
name: form_content_editable
categories:
  - Forms
  - All
---

This form looks and behaves mostly like a content editable field

```html_example
<form class="form-contenteditable"
      name="newEditableForm"
      ng-class="{"saving": editText.saving, "editing": editText.editing}"
      ng-controller="FormContentEditableController"
      ng-submit="editText.save()">
  <label class="txt-c">
    <div class="form-group mbn">
      <span class="form-contenteditable-hint link-lowlight">Hover text</span>
      <h5 class="type-primary-4 showing-text">Default text</h5>
      <div class="saving-text">Updating Text...</div>
      <input class="form-control" name="name"
             ng-blur="editText.save()"
             ng-focus="editText.enterEditMode()"
             ng-model="editText.newModel.name"
             required="required" tabIndex="-1" type="text">
      </input>
    </div>
  </label>
</form>
```
*/
/* line 1101, ../src/pivotal-ui/components/forms.scss */
.form-contenteditable {
  position: relative;
}
/* line 1104, ../src/pivotal-ui/components/forms.scss */
.form-contenteditable .form-contenteditable-hint {
  display: none;
}
/* line 1107, ../src/pivotal-ui/components/forms.scss */
.form-contenteditable label {
  padding: 5px;
  cursor: pointer;
  margin-bottom: 0;
}
/* line 1112, ../src/pivotal-ui/components/forms.scss */
.form-contenteditable input.form-control {
  background-color: transparent;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  text-align: center;
  margin: 0;
  padding: 0px;
  border: 1px solid transparent;
  border-radius: 3px;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  line-height: 1.2;
  height: auto;
}
/* line 1129, ../src/pivotal-ui/components/forms.scss */
.form-contenteditable .showing-text {
  margin: 0;
}
/* line 1132, ../src/pivotal-ui/components/forms.scss */
.form-contenteditable .saving-text {
  display: none;
}
/* line 1136, ../src/pivotal-ui/components/forms.scss */
.form-contenteditable.editing .form-contenteditable-hint {
  display: none;
}
/* line 1140, ../src/pivotal-ui/components/forms.scss */
.form-contenteditable:hover .form-contenteditable-hint {
  display: block;
}
/* line 1144, ../src/pivotal-ui/components/forms.scss */
.form-contenteditable.saving:hover .form-contenteditable-hint {
  display: none;
}
/* line 1148, ../src/pivotal-ui/components/forms.scss */
.form-contenteditable:hover .showing-text {
  display: none;
}
/* line 1153, ../src/pivotal-ui/components/forms.scss */
.form-contenteditable.saving .saving-text {
  display: block;
}
/* line 1156, ../src/pivotal-ui/components/forms.scss */
.form-contenteditable.saving .showing-text {
  display: none;
}

/*doc
---
title: Toggle Switches
name: form_toggle_switch
categories:
  - Forms
  - All
---

A toggle switch is a horizontally styled checkbox which represents true with blue and false with gray.

```html_example
<div class="form-group">
  <input id="toggleSwitch" class="toggle-switch toggle-switch-lg" type="checkbox">
  <label for="toggleSwitch">Toggle Switch</label>
</div>
```

*/
/* line 1182, ../src/pivotal-ui/components/forms.scss */
.toggle-switch {
  position: absolute;
  visibility: hidden;
}
/* line 1186, ../src/pivotal-ui/components/forms.scss */
.toggle-switch + label {
  position: relative;
  display: block;
  background-color: #d4d9d9;
  transition: background 0.4s;
  cursor: pointer;
  outline: none;
  text-indent: -99999px;
}
/* line 1195, ../src/pivotal-ui/components/forms.scss */
.toggle-switch + label:after {
  position: absolute;
  top: 4px;
  left: 4px;
  bottom: 4px;
  display: block;
  background-color: white;
  transition: margin 0.4s, background 0.4s;
  content: "";
}
/* line 1207, ../src/pivotal-ui/components/forms.scss */
.toggle-switch:checked + label {
  background-color: #2185c5;
}
/* line 1211, ../src/pivotal-ui/components/forms.scss */
.toggle-switch[disabled] + label {
  opacity: 0.5;
  filter: alpha(opacity=50);
}
/* line 1216, ../src/pivotal-ui/components/forms.scss */
.toggle-switch.toggle-switch-lg + label {
  width: 80px;
  height: 40px;
  border-radius: 40px;
}
/* line 1221, ../src/pivotal-ui/components/forms.scss */
.toggle-switch.toggle-switch-lg + label:after {
  width: 30px;
  border-radius: 15px;
}
/* line 1227, ../src/pivotal-ui/components/forms.scss */
.toggle-switch.toggle-switch-lg:checked + label:after {
  margin-left: 42px;
}

/*pending
---
title: Focus Inputs
name: form_focus_input
categories:
  - Forms
  - All
---

Add the focus-input directive to an element that should be focused if the focus-input expression changes such that it evalutes as true.

```html_example
<a ng-click="focus_input1=true; focus_input2=false;">Focus input 1</a>
<br/>
<a ng-click="focus_input2=true; focus_input1=false;">Focus input 2</a>
<br/>
<input focus-input="focus_input1"></input>
<input focus-input="focus_input2"></input>
```

*/
/*doc
---
title: React Forms
name: form_react
categories:
  - Beta
---
*/
/*doc
---
title: Search Inputs
name: form_search_input_react
parent: form_react
---

```react_example
<UI.SearchInput placeholder="Search..."/>
```

Example of composing a SearchInput with state and I/O...

```jsx_example
var FilteringSearchExample = React.createClass({
  getInitialState: function () {
    return {
      filter: "",
      items: ['Apple', 'Banana', 'Orange']  // Defaults in the event the server is down
    }
  },

  componentDidMount: function () {
    var self = this;

    $.getJSON('http://pivotal-enchilada.cfapps.io/list', function (data) {
      self.setState({ items: data });
    });
  },

  updateFilter: function (event) {
    this.setState({ filter: event.target.value });
  },

  render: function () {
    var filterRegex = new RegExp(this.state.filter, "i");
    var displayedItems = _.filter(this.state.items, function (item) {
      return item.match(filterRegex);
    });

    var listItems = _.map(displayedItems, function (item) {
      return (<li key={item}>{item}</li>)
    });

    return (
      <div>
        <UI.SearchInput placeholder='Filter by...' onChange={this.updateFilter}/>
        <ul>
          {listItems}
        </ul>
      </div>
    )
  }
});
```

```react_example
<FilteringSearchExample />
```

*/
/*doc
---
title: Radio Inputs
name: form_radio_input_react
parent: form_react
---

```jsx_example
var MyComponent = React.createClass({
  getInitialState: function() { return {selection: null}; },

  change: function(value) {
    this.setState({selection: value});
  },

  render: function() {
    return (
      <form role="form" className="form-horizontal">
        <div className="form-group">
          <UI.Col md={3}>
            <label>Options</label>
          </UI.Col>
          <UI.Col md={21}>
            <UI.RadioGroup name="stuff" onChange={this.change}>
              <UI.Radio value="others">Others</UI.Radio>
              <UI.Radio value="others1" defaultChecked>More others</UI.Radio>
              <UI.Radio value="special">Click for more!</UI.Radio>
            </UI.RadioGroup>
          </UI.Col>
        </div>
        {this.state.selection === 'special' && <div className="form-group">
          <UI.Col md={3}>
            <label>Stuff that appears</label>
          </UI.Col>
          <UI.Col md={21}>
            <label htmlFor="exampleInputEmail1">Email address</label>
            <input type="email" className="form-control" id="exampleInputEmail1" placeholder="Enter email" />
          </UI.Col>
        </div>}
      </form>
    );
  }
});
```

```react_example
<MyComponent />
```

*/
/*doc
---
title: Modals
name: modal
categories:
  - Objects
  - All
---

Modals bring desired content to the foreground and de-emphasize the rest of the page.

<!-- Button trigger modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch basic modal
</button>
<button class="btn btn-primary" data-toggle="modal" data-target="#myAltModal">
  Launch alternate modal
</button>

<!-- Modal Basic -->
<div class="modal fade modal-basic" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-lowlight" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal Alternate -->
<div class="modal fade modal-alt" id="myAltModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-lowlight" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
*/
/* line 62, ../src/pivotal-ui/components/modals.scss */
.modal .modal-dialog {
  padding-top: 50px;
}
/* line 65, ../src/pivotal-ui/components/modals.scss */
.modal .modal-content {
  border-radius: 0;
  border-width: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
}
/* line 72, ../src/pivotal-ui/components/modals.scss */
.modal .modal-header {
  padding: 15px;
}
/* line 76, ../src/pivotal-ui/components/modals.scss */
.modal .modal-footer {
  padding: 15px;
  background-color: #ecefef;
  text-align: right;
  border-top: 0px;
}

/* line 85, ../src/pivotal-ui/components/modals.scss */
.modal.modal-basic .modal-header {
  background-color: #ecefef;
}
/* line 87, ../src/pivotal-ui/components/modals.scss */
.modal.modal-basic .modal-header .modal-title {
  color: #686868;
  text-transform: uppercase;
  font-weight: 900;
}

/* line 103, ../src/pivotal-ui/components/modals.scss */
.modal.modal-alt .modal-header {
  background-color: #243640;
}
/* line 105, ../src/pivotal-ui/components/modals.scss */
.modal.modal-alt .modal-header .modal-title {
  color: #F8F8F8;
  font-weight: 900;
}
/* line 109, ../src/pivotal-ui/components/modals.scss */
.modal.modal-alt .modal-header .close {
  color: #F8F8F8;
}

/*pending
---
title: Inline
name: modal_inline
parent: modal
---

```html_example
<div class="inline-modal" ng-class="inlineModalExample.state" ng-cloak="<%= true %>" ng-controller="InlineModalExampleCtrl">
  <div class="modal-backdrop animate-show"></div>
  <div class="content">
    <div class="panel panel-shadow">
      <div class="panel-body pavxl phxxl">
        I'm the content!
        <a ng-click="activateInlineModal()" ng-show="inlineModalExample.state === "showing"">Click here to inline-modal me.</a>
        <a ng-click="deactivateInlineModal()" ng-show="inlineModalExample.state === "editing"">Click here to de-inline-modal me.</a>
      </div>
    </div>
  </div>
</div>
```
*/
/* .inline-modal { */
/* position: relative; */
/* .inline-modal-errors { */
/* position: absolute; */
/* right: 0; */
/* top: 110%; */
/* z-index: 1029; */
/* } */
/* .modal-backdrop { */
/* position: fixed; */
/* top: 0; */
/* right: 0; */
/* bottom: 0; */
/* left: 0; */
/* } */
/* .content { */
/* position: relative; */
/* } */
/* &.editing { */
/* h2, .h4 { */
/* color: $gray-2; */
/* } */
/* .content { */
/* z-index: 1029; // above the scrim */
/* background-color: $blue-4; */
/* } */
/* .modal-backdrop { */
/* display: block; */
/* z-index: 1019; */
/* } */
/* } */
/* &.showing { */
/* .content { */
/* background-color: $gray-10; */
/* } */
/* .modal-backdrop { */
/* display: none; */
/* } */
/* } */
/* &.saving { */
/* .content { */
/* background-color: $gray-10; */
/* } */
/* .modal-backdrop { */
/* display: none; */
/* } */
/* } */
/* > .panel-body { */
/* min-height: 140px; */
/* } */
/* .animate-show { */
/* opacity: .8; */
/* } */
/* .animate-show.ng-hide-add, */
/* .animate-show.ng-hide-remove { */
/* display: block !important; */
/* } */
/* .animate-show.ng-hide-add.ng-hide-add-active, */
/* .animate-show.ng-hide-remove.ng-hide-remove-active { */
/* -webkit-transition: all ease-out 0.1s; */
/* transition: all ease-out 0.1s; */
/* } */
/* .animate-show.ng-hide { */
/* opacity: 0; */
/* } */
/* } */
/*doc
---
title: React Modals
name: modal_react
categories:
  - Beta
---

We provide 3 components that can be used to assemble modals:

* `UI.Modal`
* `UI.ModalBody`
* `UI.ModalFooter`

<div class="alert alert-info mbxl">
  <h5 class="em-high mtn">
    Opening and closing the modal with callbacks
  </h5>
  <p>
    Modals will be closed by default. To open the modal, add a <code>ref</code>
    property to the modal (i.e. <code>ref='myModal'</code>). Trigger
    <code>this.refs.myModal.open();</code> to open the modal, and
    <code>this.refs.myModal.close();</code> to close the modal.
  </p>
</div>

There are 4 ways to close the modal

* Clicking the "x" button
* Clicking on the modal backdrop
* Clicking the esc key
* Doing any action that triggers `this.refs.myModal.close`.

```jsx_example

var MyModal = React.createClass({
  _openModal: function(){
    this.refs.modal.open();
  },

  _closeModal: function() {
    this.refs.modal.close();
  },

  render: function() {
    return (
      <div>
        <UI.DefaultButton id='openButton' onClick={this._openModal}>Open Modal</UI.DefaultButton>
        <UI.Modal title='What a Header!' ref='modal'>
          <UI.ModalBody>Text in a body</UI.ModalBody>
          <UI.ModalFooter>
            <UI.DefaultButton id='closeButton' onClick={this._closeModal}>Close</UI.DefaultButton>
          </UI.ModalFooter>
        </UI.Modal>
      </div>
    )
  }
});

```

```react_example_table
<MyModal/>
```
*/
/*doc
---
title: Avatars
name: avatar
categories:
  - Elements
  - All
---

Regular avatars are expected to by 100px by 100px.


```html_example
<img alt="..." class="img-circle avatar" height="100" src="http://placehold.it/100x100" width="100">
```


*/
/* line 20, ../src/pivotal-ui/components/avatars.scss */
.avatar {
  border: 4px solid #243640;
  box-sizing: border-box;
}

/* line 26, ../src/pivotal-ui/components/avatars.scss */
.gravatar {
  display: inline-block;
  position: relative;
}
/* line 29, ../src/pivotal-ui/components/avatars.scss */
.gravatar img {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
/* line 37, ../src/pivotal-ui/components/avatars.scss */
.gravatar i {
  text-align: center;
  z-index: 1;
}
/* line 41, ../src/pivotal-ui/components/avatars.scss */
.gravatar i.overlay {
  background-color: transparent;
  z-index: 3;
  position: absolute;
}

/*doc
---
title: Small Gravatar
name: avatar_01_gravatar_small
parent: avatar
---

Allows you to show a gravatar with the proper default 'image' (icon).

To use in a view, simply call

`= render 'shared/gravatar_small', email: 'some@email.com'`

```html_example
<div class="gravatar gravatar-sm">
  <img src="https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&amp;d=blank">
  <i class="fa fa-user"></i>
</div>
<div class="gravatar gravatar-sm">
  <img src="https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=20&amp;d=blank">
  <i class="fa fa-user"></i>
</div>
```

*/
/*doc
---
title: Small with Envelope
name: avatar_02_gravatar_small_with_envelope
parent: avatar
---

Allows you to show a gravatar with an icon overlay.

To use in a view, simply call

`= render 'shared/gravatar_small', email: 'some@email.com'`

```html_example
<div class="gravatar gravatar-sm">
  <img src="https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&amp;d=blank">
  <i class="fa fa-user"></i>
  <i class="overlay fa fa-envelope"></i>
</div>
<div class="gravatar gravatar-sm mlxl">
  <img src="https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=20&amp;d=blank">
  <i class="fa fa-user"></i>
  <i class="overlay fa fa-envelope"></i>
</div>
<div class="gravatar gravatar-sm mlxl">
  <img src="https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&amp;d=blank">
  <i class="fa fa-user highlight"></i>
  <i class="overlay fa fa-check"></i>
</div>
<div class="gravatar gravatar-sm mlxl">
  <img src="https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=20&amp;d=blank">
  <i class="fa fa-user"></i>
  <i class="overlay fa fa-check"></i>
</div>
```
*/
/* line 113, ../src/pivotal-ui/components/avatars.scss */
.gravatar-sm i {
  color: #b4b4b4;
  font-size: 20px;
  line-height: 20px;
  width: 20px;
  height: 20px;
}
/* line 121, ../src/pivotal-ui/components/avatars.scss */
.gravatar-sm i.highlight {
  color: #00a79d;
}
/* line 125, ../src/pivotal-ui/components/avatars.scss */
.gravatar-sm i.overlay {
  font-size: 10px;
  color: #fff;
  right: -30%;
  bottom: -25%;
}
/* line 131, ../src/pivotal-ui/components/avatars.scss */
.gravatar-sm .fa-envelope {
  text-shadow: 1px 0px 1px #b4b4b4, -1px 0px 1px #b4b4b4, 0px 1px 1px #b4b4b4, 0px 0px 1px #b4b4b4;
}
/* line 134, ../src/pivotal-ui/components/avatars.scss */
.gravatar-sm .fa-check {
  text-shadow: 1px 0px 0px #00a79d, -1px 0px 0px #00a79d, 0px 1px 0px #00a79d, 0px 0px 0px #00a79d;
}

/*doc
---
title: Large Gravatar
name: avatar_03_gravatar_large
parent: avatar
---

Allows you to show a gravatar with the proper default 'image' (icon).

Large gravatar has a white background so it can be used on the edit profile form.

To use in a view, simply call

`= render 'shared/gravatar_large', email: 'some@email.com'`

```html_example
<div class="gravatar gravatar-lg">
  <img src="https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=80&amp;d=blank">
  <i class="fa fa-user"></i>
</div>
<div class="gravatar gravatar-lg">
  <img src="https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=80&amp;d=blank">
  <i class="fa fa-user"></i>
</div>
```

*/
/* line 167, ../src/pivotal-ui/components/avatars.scss */
.gravatar-lg {
  border: 3px solid #F8F8F8;
}
/* line 169, ../src/pivotal-ui/components/avatars.scss */
.gravatar-lg i {
  background-color: #fff;
  color: #F8F8F8;
  font-size: 62px;
  line-height: 80px;
  width: 80px;
  height: 80px;
}

/*pending
---
title: Toggle
name: toggle
categories:
  - Objects
  - All
---

Use this class for sections that can switch into an 'edit' mode.

```html_example
<div class="toggle" data-behavior="Toggle">
  <div class="panel toggle-show">
    I'm viewing...
    <a class="btn btn-default" data-target="edit" data-toggle="toggle">Edit</a>
  </div>
  <div class="panel toggle-edit">
    I'm editing...
    <a class="btn btn-default" data-target="show" data-toggle="toggle">Cancel</a>
  </div>
</div>
```

*/
/*pending
---
title: Data Behavior
name: toggle_data_behavior
parent: toggle
---

Use this class for sections that can switch into an 'edit' mode.

```html_example
<div class="toggle" data-behavior="Toggle">}
  <div class="panel toggle-show">
    I'm viewing...
    <a class="btn btn-default" data-target="edit" data-toggle="toggle">Edit</a>
  </div>
  <div class="panel toggle-edit">
    I'm editing...
    <a class="btn btn-default" data-target="show" data-toggle="toggle">Cancel</a>
  </div>
</div>
```

*/
/* line 52, ../src/pivotal-ui/components/toggles.scss */
.toggle .toggle-show {
  display: block;
}
/* line 56, ../src/pivotal-ui/components/toggles.scss */
.toggle .toggle-edit {
  display: none;
}
/* line 61, ../src/pivotal-ui/components/toggles.scss */
.toggle.edit .toggle-show {
  display: none;
}
/* line 65, ../src/pivotal-ui/components/toggles.scss */
.toggle.edit .toggle-edit {
  display: block;
}

/*pending
---
title: Angular
name: toggle_angular
parent: toggle
---

Use this class for sections that have two different viewable states.

```html_example
<div class="state-toggle" ng-class="{"state-secondary": subject.secondaryState}" ng-controller="StyleguideToggleCtrl">
  <div class="state-content-default">
    This is the default content
    <a class="btn btn-default" ng-click="toggleState()">Toggle State</a>
  </div>
  <div class="state-content-secondary">
    This is the secondary content
    <a class="btn btn-default" ng-click="toggleState()">Toggle State</a>
  </div>
</div>
```

*/
/* line 97, ../src/pivotal-ui/components/toggles.scss */
.state-toggle .state-content-default {
  display: block;
}
/* line 101, ../src/pivotal-ui/components/toggles.scss */
.state-toggle .state-content-secondary {
  display: none;
}
/* line 106, ../src/pivotal-ui/components/toggles.scss */
.state-toggle.state-secondary .state-content-default {
  display: none;
}
/* line 110, ../src/pivotal-ui/components/toggles.scss */
.state-toggle.state-secondary .state-content-secondary {
  display: block;
}

/*doc
---
title: Spinners
name: iconography_spinner
parent: iconography
---

Spinners are used to show that some action is in progress. Spinners come in two sizes: large and small.

```html_example_table
<div class="spinner-lg bkg-default-5 out">
  <i class="fa fa-spin fa-cog mtxl"></i>
</div>

<div class="spinner-sm bkg-default-5 out">
  <i class="fa fa-spin fa-cog mtxl"></i>
</div>
```

*/
/* line 22, ../src/pivotal-ui/components/spinners.scss */
.spinner-lg {
  margin-top: 64px;
  text-align: center;
}
/* line 25, ../src/pivotal-ui/components/spinners.scss */
.spinner-lg .fa-spin {
  font-size: 48px;
  opacity: 0.5;
}

/* line 31, ../src/pivotal-ui/components/spinners.scss */
.spinner-sm {
  text-align: center;
  min-height: 320px;
}
/* line 34, ../src/pivotal-ui/components/spinners.scss */
.spinner-sm .fa-spin {
  font-size: 28px;
}
/* line 37, ../src/pivotal-ui/components/spinners.scss */
.spinner-sm.out, .spinner-sm.fade-leave-active {
  opacity: 0.2;
}

/*doc
---
title: Tooltip
name: tooltip
categories:
  - Objects
  - All
---

Tooltips are used to display extra information on hover. They can be used with any hoverable element.

The `title` attribute defines the text that appears on the tooltip.
The `data-placement` attribute defines the tooltip's placement.
If `data-placement` is not specified, the tooltip is placed on top by default.

<div class="alert alert-warning">
  <p class="em-high">
    Tooltips must be initialized with javascript: <code>$(mySelector).tooltip();</code>
  </p>
</div>

```html_example
<p>
  Check out this
  <a id="link-with-tooltip-1" href="#" data-toggle="tooltip" data-placement="left" title="I should be on the left">
    tooltip on the left!
  </a>
</p>

<p>
  Check out this
  <a id="link-with-tooltip-2" href="#" data-toggle="tooltip" data-placement="right" title="I should be on the right">
    tooltip on the right!
  </a>
</p>

<p>
  <button id="button-with-tooltip-1" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="I should be on the top">
    Check out this tooltip on the top!
  </button>
</p>

<p>
  <button id="button-with-tooltip-2" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="I should be on the bottom">
    Check out this tooltip on the bottom!
  </button>
</p>
```

```js_example
$('#link-with-tooltip-1').tooltip();
$('#link-with-tooltip-2').tooltip();
$('#button-with-tooltip-1').tooltip();
$('#button-with-tooltip-2').tooltip();
```

<div class="alert alert-info">
  <p class="em-high">
    If you want to use a tooltip on a disabled element, place the tooltip in a wrapper div with the class <code>.button-with-tooltip-wrapper</code>.
  </p>
</div>

```html_example
<div id="disabled-button-with-tooltip" class="button-with-tooltip-wrapper" data-toggle="tooltip" data-placement="right" title="This button is totally disabled!">
  <button type="button" class="btn btn-default" disabled=true>
    Disabled button
  </button>
</div>
```

```js_example
$('#disabled-button-with-tooltip').tooltip();
```

*/
/* line 77, ../src/pivotal-ui/components/tooltips.scss */
.button-with-tooltip-wrapper {
  display: inline-block;
}

/*doc
---
title: Progress Bars
name: progress_bar
categories:
  - Objects
  - All
---

This section contains static progress bar styles.


```html_example_table
<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" class="progress-bar" role="progressbar" style="width: 0%;">
    <div class="label">
      0%
    </div>
  </div>
</div>
<p>
  0 MB of 100 MB Used
</p>

<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="3" class="progress-bar" role="progressbar" style="width: 3%;">
    <div class="label">
      3%
    </div>
  </div>
</div>
<p>
  3 MB of 100 MB Used
</p>

<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="9" class="progress-bar" role="progressbar" style="width: 9%;">
    <div class="label">
      9%
    </div>
  </div>
</div>
<p>
  9 MB of 100 MB Used
</p>

<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" class="progress-bar" role="progressbar" style="width: 60%;">
    <div class="label">
      60%
    </div>
  </div>
</div>
<p>
  60 MB of 100 MB Used
</p>

<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" class="progress-bar" role="progressbar" style="width: 90%;">
    <div class="label">
      90%
    </div>
  </div>
</div>
<p>
  90 MB of 100 MB Used
</p>
```
*/
/* line 71, ../src/pivotal-ui/components/progress_bars.scss */
.progress {
  margin-bottom: 0;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0.07);
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}

/* line 80, ../src/pivotal-ui/components/progress_bars.scss */
.progress-bar {
  background: #b4b4b4;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  text-align: left;
}
/* line 86, ../src/pivotal-ui/components/progress_bars.scss */
.progress-bar .label {
  margin-left: 7px;
  font-size: 14px;
  font-weight: 900;
}

/* line 93, ../src/pivotal-ui/components/progress_bars.scss */
.progress-bar[aria-valuenow="1"],
.progress-bar[aria-valuenow="2"] {
  min-width: 3%;
}

/* line 98, ../src/pivotal-ui/components/progress_bars.scss */
.progress-bar[aria-valuenow="0"] {
  color: #686868;
  min-width: 3%;
  background: transparent;
  box-shadow: none;
}

/* line 105, ../src/pivotal-ui/components/progress_bars.scss */
.progress-bar[aria-valuenow^="9"]:not([aria-valuenow="9"]), .progress-bar[aria-valuenow="100"] {
  background: #ff434c;
}

/*pending
---
title: Animated Progress Bar
name: animated_progress_bar
categories:
  - Objects
  - All
---

This is an animated progress bar. See [progress bar][progress_bar] to see the static version.


Sometimes you will need to graphically display percent used (e.g. quota usage) or progress (e.g. profile completion).
In the html, the width should be set to match the `aria-valuenow` if the progress bar isn't animated. If it is, it should be set to 0% initially.

```html_example
<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" class="progress-bar progress-bar-animated" data-behavior="ProgressBar" role="progressbar">
    <div class="label">
      0%
    </div>
  </div>
</div>
<p>
  0 MB of 100 MB Used
</p>

<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" class="progress-bar progress-bar-animated" data-behavior="ProgressBar" role="progressbar">
    <div class="label">
      60%
    </div>
  </div>
</div>
<p>
  60 MB of 100 MB Used
</p>

<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="93" class="progress-bar progress-bar-animated" data-behavior="ProgressBar" role="progressbar">
    <div class="label">
      93%
    </div>
  </div>
</div>
<p>
  93 MB of 100 MB Used
</p>
```
*/
/* line 160, ../src/pivotal-ui/components/progress_bars.scss */
.progress-bar-animated {
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  transition: width 2s ease-in-out;
}

/*doc
---
title: Traffic Lights
name: traffic_lights
parent: console
---

Traffic lights are used to show the status of the application. "On" is used for active applications, "off" for inactive, and "loading" for when the status is still loading.

```html_example_table
<h3>On</h3>
<ul class="traffic-lights list-unstyled mvm">
  <li class="green-light">
    <i class="fa fa-circle"></i>
    5
  </li>
  <li class="gray-light">
    <i class="fa fa-circle"></i>
    1
  </li>
  <li class="red-light">
    <i class="fa fa-circle"></i>
    8
  </li>
</ul>

<h3>Off</h3>
<ul class="traffic-lights list-unstyled mvm">
  <li class="green-light off">
    <i class="fa fa-circle"></i>
  </li>
  <li class="gray-light off">
    <i class="fa fa-circle"></i>
  </li>
  <li class="red-light off">
    <i class="fa fa-circle"></i>
  </li>
</ul>

<h3>Loading</h3>
<ul class="traffic-lights list-unstyled mvm">
  <li class="green-light off loading-green">
    <i class="fa fa-circle"></i>
  </li>
  <li class="gray-light off loading-gray">
    <i class="fa fa-circle"></i>
  </li>
  <li class="red-light off loading-red">
    <i class="fa fa-circle"></i>
  </li>
</ul>
```

*/
@-webkit-keyframes loadingFade {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
@-moz-keyframes loadingFade {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
@keyframes loadingFade {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
/* line 74, ../src/pivotal-ui/components/traffic_lights.scss */
.traffic-lights {
  margin: 0;
  line-height: 1.3em;
}
/* line 82, ../src/pivotal-ui/components/traffic_lights.scss */
.traffic-lights .fa, .traffic-lights .back-to-top {
  font-size: 12px;
}
/* line 86, ../src/pivotal-ui/components/traffic_lights.scss */
.traffic-lights .off i {
  opacity: 0.4;
}
/* line 91, ../src/pivotal-ui/components/traffic_lights.scss */
.traffic-lights .green-light i {
  transition: opacity 1500ms ease-out;
  color: #00a79d;
}
/* line 98, ../src/pivotal-ui/components/traffic_lights.scss */
.traffic-lights .gray-light i {
  transition: opacity 1500ms ease-out;
  color: #8d8e8e;
}
/* line 105, ../src/pivotal-ui/components/traffic_lights.scss */
.traffic-lights .red-light i {
  transition: opacity 1500ms ease-out;
  color: #ff434c;
}
/* line 111, ../src/pivotal-ui/components/traffic_lights.scss */
.traffic-lights .loading-red {
  -webkit-animation: loadingFade 2s ease-in-out infinite;
  -o-animation: loadingFade 2s ease-in-out infinite;
  animation: loadingFade 2s ease-in-out infinite;
}
/* line 115, ../src/pivotal-ui/components/traffic_lights.scss */
.traffic-lights .loading-green {
  -webkit-animation: loadingFade 2s ease-in-out infinite;
  -o-animation: loadingFade 2s ease-in-out infinite;
  animation: loadingFade 2s ease-in-out infinite;
}
/* line 119, ../src/pivotal-ui/components/traffic_lights.scss */
.traffic-lights .loading-gray {
  -webkit-animation: loadingFade 2s ease-in-out 1s infinite;
  -o-animation: loadingFade 2s ease-in-out 1s infinite;
  animation: loadingFade 2s ease-in-out 1s infinite;
}

/*pending
---
title: Hoverable
name: hoverable
categories:
  - Utilities
  - Objects
  - All
---

This component is for showing hidden actions on hover.
If you put this on an element then hovering on that parent element will show the hidden element.

List example:

This can be used with any kind of list but the list group style seems to fit this use case best.

```html_example
<ul class="list-group" hoverable-group="true">
  <li class="list-group-item" hoverable="true">
    List Item 1
    <a class="hovered" href="#">Edit</a>
  </li>
  <li class="list-group-item" hoverable="true">
    List Item 2
    <a class="hovered" href="#">Edit</a>
  </li>
  <li class="list-group-item" hoverable="true">
    List Item 3
    <a class="hovered" href="#">Edit</a>
  </li>
  <li class="list-group-item">
    Not hoverable
  </li>
</ul>
```

Table example:

```html_example
<table hoverable-group="true">
  <tr>
    <th>Name</th>
  </tr>
  <tr hoverable="true">
    <td>
      Row 1
      <a class="hovered" href="#">Delete</a>
    </td>
  </tr>
  <tr hoverable="<%= true %>">
    <td>
      Row 2
      <a class="hovered" href="#">Delete</a>
    </td>
  </tr>
  <tr hoverable="true">
    <td>
      Row 3
      <a class="hovered" href="#">Delete</a>
    </td>
  </tr>
  <tr>
    <td>
      Not hoverable
    </td>
  </tr>
</table>
```

*/
/* line 73, ../src/pivotal-ui/components/hoverable.scss */
[hoverable]:hover, [hoverable].clicked {
  background-color: #ecefef;
}
/* line 76, ../src/pivotal-ui/components/hoverable.scss */
[hoverable]:hover .hovered, [hoverable].clicked .hovered {
  visibility: visible;
}

/* line 82, ../src/pivotal-ui/components/hoverable.scss */
[hoverable] .hovered {
  visibility: hidden;
  float: right;
}

/*doc
---
title: Code
name: code
categories:
  - Objects
  - All
---

This is your basic unstyled code sample:

```html_example
<pre class="pre-unstyled"><code>class Foo
  def bar
    puts 'hi'
  end
end</code></pre>
```
*/
/* line 21, ../src/pivotal-ui/components/code.scss */
.pre-unstyled {
  background-color: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
  color: inherit;
}

/*doc
---
title: Styled Code
name: code_styled
parent: code
---

In order to show syntax-highlighted code, you will need to apply a language specific class to the code tag. For example, `.language-ruby`.

There are several languages already available (and others available from the [Prismjs.com](http://prismjs.com
) website), including:

* Markup
* CSS
* C-like
* JavaScript
* Java
* PHP
* PHP
* CoffeeScript
* Sass
* Bash
* Python
* HTTP
* Ruby
* Go

```html_example
<pre><code class="language-ruby">class Foo
  def bar
    puts 'hi'
  end
end</code></pre>
```

Make it scrollable

```html_example
<pre class="pre-scrollable"><code class="language-ruby">class Foo
  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end
end</code></pre>
```

Scrollable with too little content:

```html_example
<pre class="pre-scrollable"><code class="language-ruby">class Foo
  def bar
    puts 'hi'
  end
end</code></pre>
```

If you would like a set a default height, please add it manually.

*/
/* line 113, ../src/pivotal-ui/components/code.scss */
.pre-scrollable {
  overflow-y: auto;
}

/*doc
---
title: Inline
name: code_inline
parent: code
---

```html_example
<p>This is an example of a paragraph with <code>an inline code snippet</code> within it.</p>
```

*/
/*doc
---
title: Inline Dark
name: code_inline_dark
parent: code
---

```html_example
<p>This is an example of a paragraph with <code class="inline-dark">a dark inline code snippet</code> within it.</p>
```

*/
/* line 143, ../src/pivotal-ui/components/code.scss */
.inline-dark {
  background-color: #243640;
  border-radius: 3px;
  color: #F1C148;
}

/*doc
---
title: Terminal Window
name: code_terminal_window
parent: code
---

<label>Alternate CSS <input type='checkbox' name='stylesheet' class='alternate-css'/></label>

```html_example
<div class="terminal">
  <pre><code class="language-ruby">class Foo
  def bar
    puts 'hi'
  end
end

class Bar
  def bar
    puts 'hi'
  end
end

class Baz
  def bar
    puts 'hi'
  end
end

class Bop
  def bar
    puts 'hi'
  end
end</code></pre>
</div>

```

*/
/* line 189, ../src/pivotal-ui/components/code.scss */
.terminal {
  background-color: #d4d9d9;
  padding: 6px 10px 12px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}
/* line 195, ../src/pivotal-ui/components/code.scss */
.terminal::before {
  content: '\F111 \0000a0 \0000a0 \0000a0 \0000a0 \F111 \0000a0 \0000a0 \0000a0 \0000a0 \F111';
  color: #8d8e8e;
  font-size: 13px;
  font-family: FontAwesome;
}
/* line 202, ../src/pivotal-ui/components/code.scss */
.terminal pre[class*="language-"] {
  margin: 2px 0 0 0;
  border-radius: 3px;
  height: 320px;
  overflow-y: auto;
}

/*doc
---
title: Images
name: image
categories:
  - Elements
  - All
---
*/
/*doc
---
title: Responsive
name: image_responsive
parent: image
---

Images can be made responsive-friendly via the addition of the `.img-responsive` class. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales nicely to the parent element. See bootstrap 3 for further documentation of this feature.

```html_example
<div class="row">
  <div class="col-md-5">
    <img alt="Responsive image" class="img-responsive" src="../images/such-awesome.jpg"/>
  </div>
  <div class="col-md-7">
    <img alt="Responsive image" class="img-responsive" src="../images/such-awesome.jpg"/>
  </div>
  <div class="col-md-12">
    <img alt="Responsive image" class="img-responsive" src="../images/such-awesome.jpg"/>
  </div>
</div>
```

*/
/*doc
---
title: Responsive SVG
name: image_responsive_svg
parent: image
---

SVG can be made responsive-friendly via the addition of the `.svg-responsive` class on a
wrapper div and the `.svg-content` class on the svg itself. You'll also need to to define
the height to width ratio as an inline padding bottom style on the `.svg-responsive` element like so:

```
<div class="svg-responsive" style="padding-bottom: 78.31%">
  <svg class="svg-content" viewBox="38 45 125 120" preserveAspectRatio="xMinYMin meet">
    ...
  </svg>
</div>
```

The `padding-bottom` should equal the **height divided by the width** of your specific svg.

For more information about setting up your svg, read this article about [svg coordinates systems by Sara Soueidan](http://sarasoueidan.com/blog/svg-coordinate-systems/).

<div class="row">
  <div class="col-md-5">
    <div class="svg-responsive" style="padding-bottom: 78.31%">
      <!-- You need to set the padding bottom equal to the height/width of the svg element. -->
      <svg class="svg-content" viewBox="38 45 125 120" preserveAspectRatio="xMinYMin meet">
        <style>
            #wing{fill:#81CCAA;}
            #body{fill:#B8E4C2;}
            #pupil{fill:#1F2600;}
            #beak{fill:#F69C0D;}
            .eye-ball{fill:#F6FDC4;}
        </style>
        <g id="bird">
            <g id="body">
                <path d="M48.42,78.11c0-17.45,14.14-31.58,31.59-31.58s31.59,14.14,31.59,31.58c0,17.44-14.14,31.59-31.59,31.59
                S48.42,95.56,48.42,78.11"/>
                <path d="M109.19,69.88c0,0-8.5-27.33-42.51-18.53c-34.02,8.81-20.65,91.11,45.25,84.73
                c40.39-3.65,48.59-24.6,48.59-24.6S124.68,106.02,109.19,69.88"/>
                <path id="wing" d="M105.78,75.09c4.56,0,8.84,1.13,12.62,3.11c0,0,0.01-0.01,0.01-0.01l36.23,12.38c0,0-13.78,30.81-41.96,38.09
                c-1.51,0.39-2.82,0.59-3.99,0.62c-0.96,0.1-1.92,0.16-2.9,0.16c-15.01,0-27.17-12.17-27.17-27.17
                C78.61,87.26,90.78,75.09,105.78,75.09"/>
            </g>
            <g id="head">
                <path id="beak" d="M50.43,68.52c0,0-8.81,2.58-10.93,4.86l9.12,9.87C48.61,83.24,48.76,74.28,50.43,68.52"/>
                <path class="eye-ball" d="M60.53,71.68c0-6.33,5.13-11.46,11.46-11.46c6.33,0,11.46,5.13,11.46,11.46c0,6.33-5.13,11.46-11.46,11.46
                    C65.66,83.14,60.53,78.01,60.53,71.68"/>
                <path id="pupil" d="M64.45,71.68c0-4.16,3.38-7.53,7.54-7.53c4.16,0,7.53,3.37,7.53,7.53c0,4.16-3.37,7.53-7.53,7.53
                    C67.82,79.22,64.45,75.84,64.45,71.68"/>
                <path class="eye-ball" d="M72.39,74.39c0-2.73,2.22-4.95,4.95-4.95c2.73,0,4.95,2.21,4.95,4.95c0,2.74-2.22,4.95-4.95,4.95
                    C74.6,79.34,72.39,77.13,72.39,74.39"/>
            </g>
        </g>
      </svg>
    </div>
  </div>
  <div class="col-md-7">
    <div class="svg-responsive" style="padding-bottom: 78.31%">
      <!-- You need to set the padding bottom equal to the height/width of the svg element. -->
      <svg class="svg-content" viewBox="38 45 125 120" preserveAspectRatio="xMinYMin meet">
        <style>
            #wing{fill:#81CCAA;}
            #body{fill:#B8E4C2;}
            #pupil{fill:#1F2600;}
            #beak{fill:#F69C0D;}
            .eye-ball{fill:#F6FDC4;}
        </style>
        <g id="bird">
            <g id="body">
                <path d="M48.42,78.11c0-17.45,14.14-31.58,31.59-31.58s31.59,14.14,31.59,31.58c0,17.44-14.14,31.59-31.59,31.59
                S48.42,95.56,48.42,78.11"/>
                <path d="M109.19,69.88c0,0-8.5-27.33-42.51-18.53c-34.02,8.81-20.65,91.11,45.25,84.73
                c40.39-3.65,48.59-24.6,48.59-24.6S124.68,106.02,109.19,69.88"/>
                <path id="wing" d="M105.78,75.09c4.56,0,8.84,1.13,12.62,3.11c0,0,0.01-0.01,0.01-0.01l36.23,12.38c0,0-13.78,30.81-41.96,38.09
                c-1.51,0.39-2.82,0.59-3.99,0.62c-0.96,0.1-1.92,0.16-2.9,0.16c-15.01,0-27.17-12.17-27.17-27.17
                C78.61,87.26,90.78,75.09,105.78,75.09"/>
            </g>
            <g id="head">
                <path id="beak" d="M50.43,68.52c0,0-8.81,2.58-10.93,4.86l9.12,9.87C48.61,83.24,48.76,74.28,50.43,68.52"/>
                <path class="eye-ball" d="M60.53,71.68c0-6.33,5.13-11.46,11.46-11.46c6.33,0,11.46,5.13,11.46,11.46c0,6.33-5.13,11.46-11.46,11.46
                    C65.66,83.14,60.53,78.01,60.53,71.68"/>
                <path id="pupil" d="M64.45,71.68c0-4.16,3.38-7.53,7.54-7.53c4.16,0,7.53,3.37,7.53,7.53c0,4.16-3.37,7.53-7.53,7.53
                    C67.82,79.22,64.45,75.84,64.45,71.68"/>
                <path class="eye-ball" d="M72.39,74.39c0-2.73,2.22-4.95,4.95-4.95c2.73,0,4.95,2.21,4.95,4.95c0,2.74-2.22,4.95-4.95,4.95
                    C74.6,79.34,72.39,77.13,72.39,74.39"/>
            </g>
        </g>
      </svg>
    </div>
  </div>
  <div class="col-md-12">
    <div class="svg-responsive" style="padding-bottom: 78.31%">
      <!-- You need to set the padding bottom equal to the height/width of the svg element. -->
      <svg class="svg-content" viewBox="38 45 125 120" preserveAspectRatio="xMinYMin meet">
        <style>
            #wing{fill:#81CCAA;}
            #body{fill:#B8E4C2;}
            #pupil{fill:#1F2600;}
            #beak{fill:#F69C0D;}
            .eye-ball{fill:#F6FDC4;}
        </style>
        <g id="bird">
            <g id="body">
                <path d="M48.42,78.11c0-17.45,14.14-31.58,31.59-31.58s31.59,14.14,31.59,31.58c0,17.44-14.14,31.59-31.59,31.59
                S48.42,95.56,48.42,78.11"/>
                <path d="M109.19,69.88c0,0-8.5-27.33-42.51-18.53c-34.02,8.81-20.65,91.11,45.25,84.73
                c40.39-3.65,48.59-24.6,48.59-24.6S124.68,106.02,109.19,69.88"/>
                <path id="wing" d="M105.78,75.09c4.56,0,8.84,1.13,12.62,3.11c0,0,0.01-0.01,0.01-0.01l36.23,12.38c0,0-13.78,30.81-41.96,38.09
                c-1.51,0.39-2.82,0.59-3.99,0.62c-0.96,0.1-1.92,0.16-2.9,0.16c-15.01,0-27.17-12.17-27.17-27.17
                C78.61,87.26,90.78,75.09,105.78,75.09"/>
            </g>
            <g id="head">
                <path id="beak" d="M50.43,68.52c0,0-8.81,2.58-10.93,4.86l9.12,9.87C48.61,83.24,48.76,74.28,50.43,68.52"/>
                <path class="eye-ball" d="M60.53,71.68c0-6.33,5.13-11.46,11.46-11.46c6.33,0,11.46,5.13,11.46,11.46c0,6.33-5.13,11.46-11.46,11.46
                    C65.66,83.14,60.53,78.01,60.53,71.68"/>
                <path id="pupil" d="M64.45,71.68c0-4.16,3.38-7.53,7.54-7.53c4.16,0,7.53,3.37,7.53,7.53c0,4.16-3.37,7.53-7.53,7.53
                    C67.82,79.22,64.45,75.84,64.45,71.68"/>
                <path class="eye-ball" d="M72.39,74.39c0-2.73,2.22-4.95,4.95-4.95c2.73,0,4.95,2.21,4.95,4.95c0,2.74-2.22,4.95-4.95,4.95
                    C74.6,79.34,72.39,77.13,72.39,74.39"/>
            </g>
        </g>
      </svg>
    </div>
  </div>
</div>



*/
/* line 167, ../src/pivotal-ui/components/images.scss */
.svg-responsive {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}

/* line 175, ../src/pivotal-ui/components/images.scss */
.svg-content {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

/*doc
---
title: React Images
name: image_react
categories:
  - Beta
---
Images in react can be responsive and/or wrapped in a link.

```react_example
<UI.Image src="http://placehold.it/1000x100" responsive="true" href="http://google.com" />
```


*/
/*doc
---
title: Panes
name: pane
categories:
  - Layout
  - All
---

Panes are horizontal groupings of content that are usually used to
span the full browser window width. It's going to look funny here,
a better way to view it is on the [panes page](/pane.html).

You can combine up to two background classes on the pane component.
The one on the `.pane` element will span the full browser width. The
one on the `.container` element will be constrained to the content width.

```html_example
<div class="pane bg-dark-1">
  <div class="container bg-glow">
    <h1 class="type-neutral-11">This is a pane</h1>
  </div>
</div>

```

```html_example
<div class="pane pane-offset bg-dark-1">
  <div class="container bg-glow">
    <h1 class="type-neutral-11">This is a pane</h1>
    <div class="pane-image">
      <img class="img-responsive" src="../images/console-laptop.png" alt="A laptop showing Pivotal Web Services dashboard." />
    </div>
  </div>
</div>
<div class="pane bg-cloud">
  <div class="container">
    <h1>This is another pane</h1>
  </div>
</div>

```

*/
/* line 47, ../src/pivotal-ui/components/panes.scss */
.pane > .container {
  padding-top: 35px;
  padding-bottom: 35px;
}

/* line 54, ../src/pivotal-ui/components/panes.scss */
.pane-offset .pane-image {
  text-align: center;
  margin-bottom: -70px;
}
/* line 58, ../src/pivotal-ui/components/panes.scss */
.pane-offset .pane-image > img {
  display: inline-block;
}
/* line 62, ../src/pivotal-ui/components/panes.scss */
.pane-offset + .pane .container {
  padding-top: 70px;
}

@media (min-width: 768px) {
  /* line 69, ../src/pivotal-ui/components/panes.scss */
  .pane > .container {
    padding-top: 45px;
    padding-bottom: 45px;
  }

  /* line 75, ../src/pivotal-ui/components/panes.scss */
  .pane-offset .pane-image {
    margin-bottom: -90px;
  }
  /* line 78, ../src/pivotal-ui/components/panes.scss */
  .pane-offset + .pane .container {
    padding-top: 90px;
  }
}
@media (min-width: 992px) {
  /* line 86, ../src/pivotal-ui/components/panes.scss */
  .pane > .container {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* line 92, ../src/pivotal-ui/components/panes.scss */
  .pane-offset .pane-image {
    margin-bottom: -120px;
  }
  /* line 95, ../src/pivotal-ui/components/panes.scss */
  .pane-offset + .pane .container {
    padding-top: 120px;
  }
}
/*doc
---
title: React Panes
name: pane_react
category: Beta
---

Simple pane

```react_example
<UI.Pane className="bg-neutral-10">
  <UI.DefaultH1>This is a pane</UI.DefaultH1>
</UI.Pane>
```

Configurable pane

```react_example
<UI.BasePane outerClass="bg-dark-1" innerClass="bg-glow">
  <UI.DefaultH1 color="type-neutral-9">This is a pane (configurable)</UI.DefaultH1>
</UI.BasePane>
```
*/
/*doc
---
title: Instance Scale
name: instance_scale
parent: marketing
---

The instance scale widget is an svg and an associated code block. Include the SVG
and code in your page and the javascript and css will handle all of the behaviors.
Add the class `.selected-group` to the `.instance-column` you would like to be
highlighted on page load.

```html_example
<div class="panel bg-neutral-11">
  <div class="row">
    <div class="col-md-12 col col-md-offset-6 col-sm-24 col-sm-offset-0">
      <svg class="scale-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 531.415 353.659" preserveAspectRatio="xMinYMin meet" enable-background="new 0 0 531.415 353.659" xml:space="preserve">
      <polygon fill="url(#bg-gradient)" points="8.33,299.979 70.081,247.747    143.06,235.539 186.568,180.328 240.571,149.701 288.082,110.127 351.705,84.419 432.399,75.015 527.396,4.019  527.396, 299.979  8.33,299.979"/>
      <polyline fill="none" stroke="#D4D9DA" stroke-width="4.0103" stroke-miterlimit="10" points="8.33,299.979 70.081,247.747    143.06,235.539 186.568,180.328 240.571,149.701 288.082,110.127 351.705,84.419 432.399,75.015 527.396,4.019  "/>
      <ellipse fill="#D4D9DA" cx="8.33" cy="299.979" rx="4.019" ry="4.039"/>
      <ellipse fill="#D4D9DA" cx="69.568" cy="247.981" rx="4.019" ry="4.039"/>
      <ellipse fill="#D4D9DA" cx="142.987" cy="234.989" rx="4.019" ry="4.039"/>
      <ellipse fill="#D4D9DA" cx="186.935" cy="180.42" rx="4.019" ry="4.039"/>
      <ellipse fill="#D4D9DA" cx="240.633" cy="149.178" rx="4.019" ry="4.039"/>
      <ellipse fill="#D4D9DA" cx="289.064" cy="110.116" rx="4.019" ry="4.039"/>
      <ellipse fill="#D4D9DA" cx="351.213" cy="84.598" rx="4.019" ry="4.039"/>
      <ellipse fill="#D4D9DA" cx="432.796" cy="74.253" rx="4.019" ry="4.039"/>
      <circle fill="#D4D9DA" cx="527.396" cy="4.019" r="4.019"/>

      <text transform="matrix(1 0 0 1 0 347.8439)" fill="#8E8F8E" font-family="'SourceSansPro'" font-size="18">
                                                                                                              Instances
      </text>
      <g class="instances-column selected-group" id="instances-1" filter="url(#desaturate-filter)">
        <rect x="40" y="0" height="530" width="130" opacity="0" />
        <text transform="matrix(1 0 0 1 105.1135 347.8439)" fill="#00A69E" font-family="'SourceSansPro'" font-size="18">
          1
        </text>
        <path fill="#00A69E" d="M105.96 291.558l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L105.96 291.558z"/>
        <path fill="#3F4950" d="M80.129 279.625v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L80.129 279.625z"/>
        <path fill="#525D64" d="M131.001 278.331l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C132.209 278.859 131.726 278.475 131.001 278.331z"/>
      </g>

      <g class="instances-column" id="instances-4" filter="url(#desaturate-filter)">
        <rect x="170" y="0" height="530" width="120" opacity="0" />
        <text transform="matrix(1 0 0 1 224.4272 347.8439)" fill="#00A69E" font-family="'SourceSansPro'" font-size="18">
        4
        </text>
        <path fill="#00A69E" d="M228.811 291.558l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L228.811 291.558z"/>
        <path fill="#3F4950" d="M202.98 279.625v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L202.98 279.625z"/>
        <path fill="#525D64" d="M253.853 278.331l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C255.06 278.859 254.577 278.475 253.853 278.331z"/>
        <path fill="#00A69E" d="M228.811 255.697l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L228.811 255.697z"/>
        <path fill="#3F4950" d="M202.98 243.765v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L202.98 243.765z"/>
        <path fill="#525D64" d="M253.853 242.47l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C255.06 242.999 254.577 242.615 253.853 242.47z"/>
        <path fill="#00A69E" d="M228.811 219.837l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L228.811 219.837z"/>
        <path fill="#3F4950" d="M202.98 207.905v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L202.98 207.905z"/>
        <path fill="#525D64" d="M253.853 206.61l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C255.06 207.138 254.577 206.755 253.853 206.61z"/>
        <path fill="#00A69E" d="M228.811 183.977l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L228.811 183.977z"/>
        <path fill="#3F4950" d="M202.98 172.044v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L202.98 172.044z"/>
        <path fill="#525D64" d="M253.853 170.75l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C255.06 171.278 254.577 170.894 253.853 170.75z"/>

      </g>
      <g class="instances-column" id="instances-6" filter="url(#desaturate-filter)">
        <rect x="290" y="0" height="530" width="130" opacity="0" />
        <text transform="matrix(1 0 0 1 347.2788 347.8439)" fill="#00A69E" font-family="'SourceSansPro'" font-size="18">
        6
        </text>
        <path fill="#00A69E" d="M351.125 291.558l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L351.125 291.558z"/>
        <path fill="#3F4950" d="M325.294 279.625v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L325.294 279.625z"/>
        <path fill="#525D64" d="M376.167 278.331l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C377.374 278.859 376.891 278.475 376.167 278.331z"/>
        <path fill="#00A69E" d="M351.125 255.697l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L351.125 255.697z"/>
        <path fill="#3F4950" d="M325.294 243.765v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L325.294 243.765z"/>
        <path fill="#525D64" d="M376.167 242.47l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C377.374 242.999 376.891 242.615 376.167 242.47z"/>
        <path fill="#00A69E" d="M351.125 219.837l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L351.125 219.837z"/>
        <path fill="#3F4950" d="M325.294 207.905v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L325.294 207.905z"/>
        <path fill="#525D64" d="M376.167 206.61l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C377.374 207.138 376.891 206.755 376.167 206.61z"/>
        <path fill="#00A69E" d="M351.125 183.977l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L351.125 183.977z"/>
        <path fill="#3F4950" d="M325.294 172.044v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L325.294 172.044z"/>
        <path fill="#525D64" d="M376.167 170.75l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C377.374 171.278 376.891 170.894 376.167 170.75z"/>
        <path fill="#00A69E" d="M351.125 148.116l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L351.125 148.116z"/>
        <path fill="#3F4950" d="M325.294 136.184v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L325.294 136.184z"/>
        <path fill="#525D64" d="M376.167 134.889l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C377.374 135.417 376.891 135.034 376.167 134.889z"/>
        <path fill="#00A69E" d="M351.125 112.332l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L351.125 112.332z"/>
        <path fill="#3F4950" d="M325.294 100.399v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L325.294 100.399z"/>
        <path fill="#525D64" d="M376.167 99.105l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C377.374 99.633 376.891 99.249 376.167 99.105z"/>
      </g>
      <g class="instances-column another-class" id="instances-8" filter="url(#desaturate-filter)">
        <rect x="420" y="0" height="530" width="130" opacity="0" />

        <text transform="matrix(1 0 0 1 470.1294 347.8439)" fill="#00A69E" font-family="'SourceSansPro'" font-size="18">
        8
        </text>
        <path fill="#00A69E" d="M474.514 291.558l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L474.514 291.558z"/>
        <path fill="#3F4950" d="M448.683 279.625v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L448.683 279.625z"/>
        <path fill="#525D64" d="M499.555 278.331l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C500.763 278.859 500.28 278.475 499.555 278.331z"/>
        <path fill="#00A69E" d="M474.514 255.697l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L474.514 255.697z"/>
        <path fill="#3F4950" d="M448.683 243.765v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L448.683 243.765z"/>
        <path fill="#525D64" d="M499.555 242.47l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C500.763 242.999 500.28 242.615 499.555 242.47z"/>
        <path fill="#00A69E" d="M474.514 219.837l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L474.514 219.837z"/>
        <path fill="#3F4950" d="M448.683 207.905v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L448.683 207.905z"/>
        <path fill="#525D64" d="M499.555 206.61l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C500.763 207.138 500.28 206.755 499.555 206.61z"/>
        <path fill="#00A69E" d="M474.514 183.977l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L474.514 183.977z"/>
        <path fill="#3F4950" d="M448.683 172.044v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L448.683 172.044z"/>
        <path fill="#525D64" d="M499.555 170.75l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C500.763 171.278 500.28 170.894 499.555 170.75z"/>
        <path fill="#00A69E" d="M474.514 148.116l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L474.514 148.116z"/>
        <path fill="#3F4950" d="M448.683 136.184v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L448.683 136.184z"/>
        <path fill="#525D64" d="M499.555 134.889l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C500.763 135.417 500.28 135.034 499.555 134.889z"/>
        <path fill="#00A69E" d="M474.514 112.332l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L474.514 112.332z"/>
        <path fill="#3F4950" d="M448.683 100.399v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L448.683 100.399z"/>
        <path fill="#525D64" d="M499.555 99.105l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C500.763 99.633 500.28 99.249 499.555 99.105z"/>
        <path fill="#00A69E" d="M474.514 76.395l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958V71.196L474.514 76.395z"/>
        <path fill="#3F4950" d="M448.683 64.463v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L448.683 64.463z"/>
        <path fill="#525D64" d="M499.555 63.168l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C500.763 63.696 500.28 63.313 499.555 63.168z"/>
        <path fill="#00A69E" d="M474.514 40.535l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958V35.336L474.514 40.535z"/>
        <path fill="#3F4950" d="M448.683 28.603v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L448.683 28.603z"/>
        <path fill="#525D64" d="M499.555 27.308l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C500.763 27.836 500.28 27.453 499.555 27.308z"/>
      </g>

      <filter id="desaturate-filter" >
      <feColorMatrix in="SourceGraphic"
      type="saturate"
      values="0" />
      </filter>

      <linearGradient id="bg-gradient" x1="0" x2="1" y1="0" y2="1">
      <stop class="instances-gradient-stop-1" offset="0%"/>
      <stop class="instances-gradient-stop-2" offset="90%"/>
      </linearGradient>
      </svg>
    </div>
  </div>
</div>

<div>
<pre class="language-bash scale-code">
<code>
 $ cf scale my_app -i <span class="instance-count">1</span>
</code>
</pre>
</div>
```
*/
/* line 143, ../src/pivotal-ui/components/scales.scss */
.scale-svg .instances-column:hover,
.scale-svg .selected-group {
  filter: none;
}
/* line 148, ../src/pivotal-ui/components/scales.scss */
.scale-svg .instances-gradient-stop-1 {
  stop-color: #ecefef;
}
/* line 149, ../src/pivotal-ui/components/scales.scss */
.scale-svg .instances-gradient-stop-2 {
  stop-color: rgba(255, 255, 255, 0);
}

/*doc
---
title: Maps
name: map
categories:
  - Objects
  - All
---

Full width map with marker at Pivotal Labs SF location, and an optional informational overlay.

```html_example
<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div class='map-wrapper'>
  <div class='pane'>
    <div class='container pan'>
      <div class='row'>
        <div class='col-sm-6 col-md-8 col-sm-offset-1'>
          <div class='map-overlay panel panel-basic bg-neutral-10 paxxl'>
            <h3 class="h2">Location</h3>
            <address class='h4 pvl'>Pivotal Software Inc.<br>
              875 Howard Street<br>
              San Francisco, CA 94103
            </address>
            <p class='h4'>Support: <a href='mailto:support@run.pivotal.io'>support@run.pivotal.io</a></p>
            <p class='h4'>Twitter: <a href='https://twitter.com/pivotalws'>@pivotalws</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class='pane pane-map'>
    <div id='labs-map'></div>
  </div>
</div>
```

```js_example
var maps = (function() {
  var self = this;
  var map;

  var mapOptions = {
    placeId: "ChIJ9w1pfYiAhYAR45k8AD-TjhA",
    center: new google.maps.LatLng(37.781787,-122.403911),
    mapElementId: 'labs-map',
    zoom: 18
  };

  var initialize = function() {
    map = new google.maps.Map(document.getElementById(mapOptions.mapElementId), {
      center: mapOptions.center,
      zoom: mapOptions.zoom,
      disableDefaultUI: true
    });

    var request = {
      placeId: mapOptions.placeId
    };

    var service = new google.maps.places.PlacesService(map);
    service.getDetails(request, createMarker);
  };

  var createMarker = function(place, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      new google.maps.Marker({
        map: map,
        position: place.geometry.location
      });
    }
  };

  self.initialize = initialize;
  return self;
})();

google.maps.event.addDomListener(window, 'load', maps.initialize);
```
*/
/* line 82, ../src/pivotal-ui/components/maps.scss */
.map-wrapper {
  position: relative;
}

/* line 86, ../src/pivotal-ui/components/maps.scss */
.pane-map {
  height: 450px;
  position: relative;
}

/* line 91, ../src/pivotal-ui/components/maps.scss */
.map-overlay {
  position: absolute;
  top: 70px;
  z-index: 99;
}

@media (max-width: 768px) {
  /* line 98, ../src/pivotal-ui/components/maps.scss */
  .map-overlay {
    top: 0;
    position: relative;
  }
}
/* line 104, ../src/pivotal-ui/components/maps.scss */
#labs-map {
  height: 100%;
}

/*doc
---
title: Labels
name: label
categories:
  - Elements
  - All
---

Labels are based on Bootstrap's labels.
Here's an example of a label on its own.

```html_example_table
<span class="label label-primary">new</span>
```

You can also place labels within HTML elements.
It will be sized based on the element's font size and its font modifiers.

```html_example_table
<p>I am a P.
  <span class="label label-primary">new</span>
</p>

<h3>I am an H3.
  <span class="label label-primary">new</span>
</h3>

<h3 class="h5">I am an H3 with an H5 modifier.
  <span class="label label-primary">new</span>
</h3>
```
*/
/* line 35, ../src/pivotal-ui/components/labels.scss */
.label {
  padding: 0.2em 0.6em;
  border-radius: 3px;
  text-transform: uppercase;
}

/*doc
---
title: Removable Labels
name: removable_label
parent: label
---

Removable labels are used as tags in an editable list. The user will either enter text or select content (i.e.: a dropdown item), and it will be styled as a removable label (most likely in a list). Developers who use these labels must implement the close functionality for when the user clicks the close button.

```html_example
<span class="label-removable">Removable
  <a class="close-btn fa fa-close"></a>
</span>
```
*/
/* line 57, ../src/pivotal-ui/components/labels.scss */
.label-removable {
  padding: 4px 7px;
  border-radius: 3px;
  background-color: #00a79d;
  color: white;
  font-weight: 600;
}
/* line 64, ../src/pivotal-ui/components/labels.scss */
.label-removable .close-btn {
  margin-left: 15px;
  color: rgba(255, 255, 255, 0.6);
}
/* line 68, ../src/pivotal-ui/components/labels.scss */
.label-removable .close-btn:hover {
  color: white;
  text-decoration: none;
}

/*doc
---
title: React Labels
name: react_label
categories:
  - Beta
---

```react_example_table
<UI.Label>yeah</UI.Label>

<UI.DefaultH3>
  Now the label is in a typography component <UI.Label>yeah</UI.Label>
</UI.DefaultH3>
```
*/
/*doc
---
title: Ribbons
name: ribbon
categories:
  - Elements
  - All
---

Ribbons should be used to call out access, status, enironment, etc.

*/
/*doc
---
title: Ribbon
name: ribbon_inline
parent: ribbon
---

```html_example_table
<div class="inline-ribbon">British</div>
<span class="mlm">For British eyes only</span>

<div class="inline-ribbon ribbon-primary">Pivotal</div>
<span class="mlm">Wow this ribbon is so inline</span>
```

*/
/* line 31, ../src/pivotal-ui/components/ribbons.scss */
.inline-ribbon {
  position: relative;
  display: inline-block;
  padding: 2px 10px;
  margin-left: 22px;
  margin-right: 22px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  background-color: #b4b4b4;
}
/* line 45, ../src/pivotal-ui/components/ribbons.scss */
.inline-ribbon:before, .inline-ribbon:after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  border-color: #b4b4b4;
  border-width: 11px;
  border-style: solid;
}
/* line 56, ../src/pivotal-ui/components/ribbons.scss */
.inline-ribbon:before {
  border-left-color: transparent;
  left: -22px;
}
/* line 61, ../src/pivotal-ui/components/ribbons.scss */
.inline-ribbon:after {
  border-right-color: transparent;
  right: -22px;
}

/* line 67, ../src/pivotal-ui/components/ribbons.scss */
.ribbon-primary {
  background-color: #00a79d;
}
/* line 70, ../src/pivotal-ui/components/ribbons.scss */
.ribbon-primary:before {
  border-color: #00a79d;
  border-left-color: transparent;
}
/* line 75, ../src/pivotal-ui/components/ribbons.scss */
.ribbon-primary:after {
  border-color: #00a79d;
  border-right-color: transparent;
}

/*doc
---
title: Banner
name: ribbon_banner
parent: ribbon
---

You can use a banner ribbon to let the team know which environment they're
working on. Leave off the `.styleguide-component-wrapper` div when using it
in other contexts.

```html_example
<div class="styleguide-component-wrapper">
  <div class="ribbon-banner">
    Acceptance
  </div>
</div>
```

*/
/* line 102, ../src/pivotal-ui/components/ribbons.scss */
.ribbon-banner {
  position: fixed;
  top: 20px;
  left: 0;
  padding: 4px 18px 4px 24px;
  margin-left: 0;
  margin-right: 32px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  background-color: #b31612;
}
/* line 116, ../src/pivotal-ui/components/ribbons.scss */
.ribbon-banner:after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  right: -32px;
  border-style: solid;
  border-width: 16px;
  border-color: #b31612;
  border-right-color: transparent;
}

/*doc
---
title: React Ribbons
name: ribbons_react
categories:
  - Beta
---
*/
/*doc
---
title: Ribbons
name: 01_ribbons_react
parent: ribbons_react
---

```react_example_table
<UI.Ribbon> British </UI.Ribbon>
```
*/
/*doc
---
title: Primary Ribbons
name: 02_primary_ribbons_react
parent: ribbons_react
---

```react_example_table
<UI.PrimaryRibbon> English-British </UI.PrimaryRibbon>
```
*/
/*doc
---
title: Banners
name: 03_banner_ribbons_react
parent: ribbons_react
---

```react_example_table
<div className="styleguide-component-wrapper">
  <UI.Banner> British </UI.Banner>
</div>
```

*/
/*doc
---
title: Embeds
name: embed
categories:
  - Elements
  - All
---
*/
/*doc
---
title: Responsive
name: embed_responsive
parent: embed
---

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Rules are directly applied to `<iframe>`, `<embed>`, and `<object>` elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

**Pro-Tip!** You don't need to include `frameborder="0"` in your `<iframe>`s as we override that for you.

```html_example
<h1 class="h2">16-by-9</h1>
<div class="row">
  <div class="col-md-5">
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/JOCtdw9FG-s"></iframe>
    </div>
  </div>
  <div class="col-md-7">
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/JOCtdw9FG-s"></iframe>
    </div>
  </div>
  <div class="col-md-12">
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/JOCtdw9FG-s"></iframe>
    </div>
  </div>
</div>
```

```html_example
<h1 class="h2">4-by-3</h1>
<div class="row">
  <div class="col-md-5">
    <div class="embed-responsive embed-responsive-4by3">
      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/Awf45u6zrP0"></iframe>
    </div>
  </div>
  <div class="col-md-7">
    <div class="embed-responsive embed-responsive-4by3">
      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/Awf45u6zrP0"></iframe>
    </div>
  </div>
  <div class="col-md-12">
    <div class="embed-responsive embed-responsive-4by3">
      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/Awf45u6zrP0"></iframe>
    </div>
  </div>
</div>
```

*/
/*doc
---
title: Back to Top
name: back_to_top
categories:
  - Objects
  - All
---

You can use this component to scroll to the top of a page. Leave off the `.styleguide-component-wrapper` div when using it in other contexts.

The button will be fixed to the bottom right hand corner of the page. 

You can place the link anywhere in your markup, but best practices are either towards the top or bottom of your markup. 

```html_example
<div class="styleguide-component-wrapper">
  <a class="back-to-top" href="#" target="_blank" style="display: inline;"></a>
</div>
```
*/
/* line 23, ../src/pivotal-ui/components/back_to_top.scss */
.back-to-top {
  color: white;
  text-align: center;
  font-size: 20px;
  bottom: 100px;
  position: fixed;
  right: 100px;
  display: none;
  padding-top: 13px;
  height: 50px;
  width: 50px;
  z-index: 1000;
  border: 0;
  border-radius: 50%;
  background: #00a79d;
  box-shadow: 0 0 9px rgba(153, 153, 153, 0.8);
}
/* line 44, ../src/pivotal-ui/components/back_to_top.scss */
.back-to-top:hover {
  background: #00776d;
  color: white;
}

/*doc
---
title: Vertical Align
name: vertical_align
categories:
  - Layout
  - All
---

The Aligner allows you to vertically align children to the top, center, or bottom.
Its height is set by default to 230px.

This component doesn't do any horizontal alignment.
You can use grids, or the [text-alignment classes][alignment]
`.txt-l`, `.txt-r`, and `.txt-c` with this component.

<div class="alert alert-warning">
  <p class="em-high">
    This component is not supported in IE10 and below.
    While the content will appear, it will not be vertically aligned.
  </p>
</div>

```html_example
<div class="aligner txt-c">
  <a class="aligner-item" href="http://bitly.com/ZTHUDU">Centered content</a>
</div>
```

Override the default height by setting an inline style like so:

```html_example
<div class="aligner" style="height: 200px;">
  <a class="aligner-item aligner-item-top" href="http://bit.ly/1wCDWdC">On Top</a>
  <a class="aligner-item" href="http://bitly.com/ZTHUDU">Center</a>
  <a class="aligner-item aligner-item-bottom" href="http://bit.ly/12TqYiL">Bottom</a>
</div>
```

Note: the background colors in the example are just for display in the styleguide.

*/
/* line 44, ../src/pivotal-ui/components/vertical_alignment.scss */
.aligner {
  height: 230px;
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  align-items: center;
  -webkit-align-items: center;
}
/* line 54, ../src/pivotal-ui/components/vertical_alignment.scss */
.aligner .aligner-item {
  flex: 0 100%;
  -webkit-flex: 0 100%;
}
/* line 58, ../src/pivotal-ui/components/vertical_alignment.scss */
.aligner .aligner-item.aligner-item-top {
  align-self: flex-start;
  -webkit-align-self: flex-start;
}
/* line 63, ../src/pivotal-ui/components/vertical_alignment.scss */
.aligner .aligner-item.aligner-item-bottom {
  align-self: flex-end;
  -webkit-align-self: flex-end;
}

/*doc
---
title: Dropdowns
name: dropdown
categories:
  - Objects
  - All
---

Dropdowns are menus that can be triggered by buttons.

This is the basic bootstrap dropdown.

```html_example
<div class="dropdown btn-group">
  <button id="dropdown-button-1" class="dropdown-toggle btn btn-primary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Button Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-button-1">
    <li role="presentation"><a href="http://www.google.com">Google</a></li>
    <li class="divider mvn"></li>
    <li role="presentation"><a href="http://www.yahoo.com">Yahoo</a></li>
    <li class="divider mvn"></li>
    </li><li role="presentation"><a href="http://www.aol.com">Aol</a></li>
  </ul>
</div>
```

<div class="alert alert-info mbxl">
  <h5 class="em-high">Dropdowns with dividers</h5>
  <p>
    If you want to add a divider between items in the dropdown,
    add a `li.divider` between list items.
  </p>
</div>

```html_example
<div class="dropdown btn-group">
  <button id="drop3" data-toggle="dropdown" class="dropdown-toggle btn btn-link" type="button"><span>Link Dropdown</span><span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
    <li role="presentation"><a role="menuDropdownItem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
    <li role="presentation"><a role="menuDropdownItem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
    <li role="presentation"><a role="menuDropdownItem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
    <li role="presentation"><a role="menuDropdownItem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
  </ul>
</div>
```

<div class="alert alert-info mbxl">
  <h5 class="em-high">No links as dropdowns</h5>
  <p>
    Instead of using an <code>a</code> tag as a dropdown,
    use a <code>button.btn.btn-link</code>.
  </p>
</div>

Here's a crazy-complex dropdown. Not for the faint of heart.

```html_example
<div class="dropdown btn-group">
  <button id="dropdown-button-2" class="dropdown-toggle btn btn-primary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-button-2">
    <li role="presentation">
      <a href="#" class="pvl">
        <div class="media">
          <div class="media-left media-middle prxl">
            <i class="fa fa-check type-neutral-2"></i>
          </div>
          <div class="media-body" style="width: 400px;">
            <h4 class="media-heading em-high type-neutral-3 mvn h5">updates and alerts</h4>
            <span class="type-neutral-4">receive all tacos and burritos.</span>
          </div>
        </div>
      </a>
    </li>
    <li role="presentation">
      <a href="#" class="pvl">
        <div class="media">
          <div class="media-left media-middle prxl">
            <i class="fa fa-check type-neutral-2" style="visibility: hidden"></i>
          </div>
          <div class="media-body" style="width: 400px;">
            <h4 class="media-heading em-high type-neutral-3 mvn h5">alerts only</h4>
            <span class="type-neutral-4">only receive tacos when burritos are issued for this product and files.</span>
          </div>
        </div>
      </a>
    </li>
    <li role="presentation">
      <a href="#" class="pvl">
        <div class="media">
          <div class="media-left media-middle prxl">
            <i class="fa fa-check type-neutral-2" style="visibility: hidden"></i>
          </div>
          <div class="media-body" style="width: 400px;">
            <h4 class="media-heading em-high type-neutral-3 mvn h5">none</h4>
            <span class="type-neutral-4">do not receive any mexican food.</span>
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>
```

*/
/*doc
---
title: React Dropdowns
name: dropdown_react
categories:
  - Beta
---

This is the basic bootstrap dropdown:

```react_example_table
<UI.Dropdown title='DropDown'>
  <UI.DropdownItem href="http://media.giphy.com/media/13py6c5BSnBkic/giphy.gif">Booyeah</UI.DropdownItem>
  <UI.DropdownItem divider />
  <UI.DropdownItem href="http://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif">Adorable</UI.DropdownItem>
</UI.Dropdown>
```

Here are all the different dropdown styles:

```react_example_table
<UI.LinkDropdown title='Link'>
   <UI.DropdownItem href="http://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif">Adorable</UI.DropdownItem>
</UI.LinkDropdown>

<UI.DefaultAltDropdown title='Default Alt'>
   <UI.DropdownItem href="http://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif">Adorable</UI.DropdownItem>
</UI.DefaultAltDropdown>

<UI.PrimaryDropdown title='Primary'>
   <UI.DropdownItem href="http://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif">Adorable</UI.DropdownItem>
</UI.PrimaryDropdown>

<UI.LowlightDropdown title='Lowlight'>
   <UI.DropdownItem href="http://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif">Adorable</UI.DropdownItem>
</UI.LowlightDropdown>

<UI.DangerDropdown title='Danger'>
   <UI.DropdownItem href="http://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif">Adorable</UI.DropdownItem>
</UI.DangerDropdown>

<UI.HighlightDropdown title='Highlight'>
   <UI.DropdownItem href="http://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif">Adorable</UI.DropdownItem>
</UI.HighlightDropdown>

<UI.HighlightAltDropdown title='Highlight Alt'>
   <UI.DropdownItem href="http://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif">Adorable</UI.DropdownItem>
</UI.HighlightAltDropdown>
```

*/
/* line 164, ../src/pivotal-ui/components/dropdowns.scss */
.dropdown-menu {
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
